What's wrong with Vue? Why does it always multiply by thousand?

@vincent15000 it's an object array that looks like this: [{id: 1, event_date: 1659949168, event_type: 'type', event_message: null}] That's also before the .map(...)

@luca-dev And you say that it multiplies several times by 1000 ? Or only once for every value ?

@vincent15000 these values are displayed in a table and it comes with a search bar. It's a shared computed property with the search bar - the search bar uses a .filter(...) . The computed property executes everytime you enter a character in the search bar and apparently this causes it to multiply by 1000

This problem doesn't occur when I remove the * 1000. I do get the wrong date though because new Date(...) takes miliseconds since 1970 as an argument, not seconds

@luca-dev Ok I understand a bit more what could be your problem. Effectively if you have an event (according to your explanation, the .map() loop) which is executed each time your enter a character in the search bar, it's surely your problem.

But I can't help you if you don't share all the code around this problem.

@vincent15000 Let me share the rest of the code.

data(){
		return{
				eventLog: [],
				filter: ' '
		}
},
computed: {
filteredEventlog() {
      if (!this.$fetchState.pending) {
        let rv = this.eventLog.data
        rv = rv
          .filter(entry =>
            !this.filter
              ? true
              : !this.filter.trim().length
              ? true
              : Object.values(entry).some(
                  tableVar =>
                    tableVar &&
                    tableVar
                      .toString()
                      .toLowerCase()
                      .includes(this.filter.toString().toLowerCase())
                )
          )
          .map(obj => {
            Object.keys(obj).forEach(key => {
              if (obj[key] === null) obj[key] = '-'
              if (key === 'event_date') {
                obj[key] = new Date(obj[key] * 1000)
              }
            })
            return obj
          })
        console.log(rv)
        return rv
      }
    }
}

I get what happens though. I understand that I'm in an event loop that happens over and over again when I enter a character - this in itself isn't the problem. The problem is that it uses the same modified array over and over again, that's why it multiplies by 1000 everytime I enter a character, my question is how do I prevent that from happening? I can't just use two computed properties because that would make rendering the table hard(-er)

@luca-dev You always change the value of the obj (filtered rv), so it's normal that for each characted typed in the search bar, you change each time the value. You should perhaps work on a copy of the filtered obj inside your map loop.

But do you need to excuted the map loop on each character typed in the search bar ? Perhaps you should execute the map loop only when the search is finished (with a validate button for example).

@vincent15000 I don't need it to execute everytime, I'd like it to be more of a one-time thing. Do you think I could just do this? rv = rv.filter(...) rd = rv.map(...) Wouldn't this make rd a copy of rv and only execute after rv since it's a synchronous flow?

Edit: No, I can't. This doesn't change the setup. I'm just using a seperate variable for my .map(...). It's still the same as chaining them together

SOLVED: I added a simple if statement that asks if the event_date is a string or not. If it isn't a string then it can execute and the opposite if it's a string.

if (key === 'event_date') {
		if (typeof obj[key] !== 'string') {
        obj[key] = new Date(obj[key] * 1000).toLocaleDateString()
       }
}

@luca-dev That can be a solution ... only if you never have a timestamp converted to a string.

@luca-dev If you have solved your problem, I let you give the best answer to the answer which helped you the best ?

@vincent15000 I should do that, yeah! Thank you so much for your help, you were really helpful :)

@vincent15000 Ahh okay, understood. Won't happen again!

@luca-dev Happy to help ;).