CODEWITHSUNDEEP
javascriptvue.js
Nopmd
Nopmd

Reputation: 67

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

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>

Upvotes: 0

Views: 82

Answers (1)

NIKUNJ KOTHIYA
NIKUNJ KOTHIYA

Reputation: 2165

Try with this line of code of OP solutions:

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

Upvotes: 1

Related Questions