filter data in Vue.js, but the result is always an empty array

Question

I want to create an application that processes and makes a sound when there is a data update. The system will announce the ID of the updated data. I have written a program that checks the database every 1000 milliseconds and if it finds a record that has been updated within 5000 milliseconds, it sends a signal to make a sound. However, I cannot print any records that have been updated within 5000 milliseconds to the screen. There is no error message displayed in the console.

console.log(finalData.value); // print array with many members

console.log(latestfinalData.value); //always print empty array

I expected outcome: The console.log(latestfinalData.value) should not be an empty array so that I can use it to make a sound.

This is full code

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const collection1Data = ref([]);
const collection2Data = ref([]);
const fetchData = async () => {
 const [collection1Response, collection2Response] = await Promise.all([
 axios.get('https://koh-abx.com:50100/onboardshows'),
 axios.get('https://koh-abx.com:50100/onboardlands'),
 ]);
 collection1Data.value = collection1Response.data;
 collection2Data.value = collection2Response.data;
};
const finalData = ref([]);
const latestfinalData = ref([]);
onMounted(async () => {
 await fetchData();
 setInterval(() => {
 fetchData().then(() => {
 finalData.value = [];
 collection1Data.value.forEach(doc1 => {
 const matchingDoc = collection2Data.value.find(doc2 => doc1.idshow === doc2.idshow);
 if (matchingDoc) {
 finalData.value.push({
 idshow: doc1.idshow,
 numbershow: doc1.updatedAt > matchingDoc.updatedAt ? doc1.numbershow : matchingDoc.numbershow,
 ab: doc1.updatedAt > matchingDoc.updatedAt ? doc1.ab : matchingDoc.ab,
 updatedAt: doc1.updatedAt > matchingDoc.updatedAt ? doc1.updatedAt : matchingDoc.updatedAt
 });
 } else {
 finalData.value.push({
 idshow: doc1.idshow,
 numbershow: doc1.numbershow,
 ab: doc1.ab,
 updatedAt: doc1.updatedAt
 });
 }
 });
 
 collection2Data.value.forEach(doc2 => {
 if (!finalData.value.find(doc => doc.idshow === doc2.idshow)) {
 finalData.value.push({
 idshow: doc2.idshow,
 numbershow: doc2.numbershow,
 ab: doc2.ab,
 updatedAt: doc2.updatedAt
 });
 }
 });
 console.log(finalData.value);
 latestfinalData.value = finalData.value.filter(doc => doc.updatedAt >= (Date.now() - 5000));
 console.log(latestfinalData.value);
 });
 }, 1000);
});
</script>

• NIKUNJ KOTHIYA: Try with changing lines of code and check it works. const updatedAtInMs = Date.parse(doc.updatedAt); latestfinalData.value = finalData.value.filter(doc => Date.parse(doc.updatedAt) >= (Date.now() - 5000));
• Nopmd: const updatedAtInMs = Date.parse(doc.updatedAt); Hi NIKUNJ KOTHIYA latestfinalData.value = finalData.value.filter(doc => Date.parse(doc.updatedAt) >= (Date.now() - 5000)); console.log(latestfinalData.value); // still get empty array
• Nopmd: [ { "idshow": 1, "numbershow": 1038, "ab": "L", "updatedAt": "2023年02月07日T06:36:18.991Z" }, { "idshow": 2, "numbershow": 168, "ab": "B", "updatedAt": "2023年02月07日T06:36:16.595Z" },
• Nopmd: it still empty so I post data of finalData.value
• Nopmd: latestfinalData.value = finalData.value.filter(doc => (Date.now() - new Date(doc.updatedAt).getTime()) < 5000); I try this one it work

Answer 1

Try with this line of code of OP solutions:

latestfinalData.value = finalData.value.filter(doc => (Date.now() - new Date(doc.updatedAt).getTime()) < 5000);