Javascript if does not return true

Question

I have a weird javascript issue. I am using vue js and axios to get some data from an API. I have dumped console.log and the values are there but my if statement will not be true.

Removed stuff so the code example is smaller.

See inline comments.

HTML:

<input v-model="system_id">
<button v-on:click="getSystemData" class="btn btn-primary">Get system data</button>


Data model:

data: () => ({
  errors: [],
  system_id: null,
  system_data: null
}),



Function:

getSystemData () {
    HTTP.get('/api/get_systems')
    .then(response => {
      this.response = response.data

      // equals 1234
      console.log(this.system_id)
      for (var key in this.response) {

        // the id 1234 is found here in a large list
        console.log(this.response[key].system_id)


        // Does not go true?!?!
        if (this.response[key].system_id === this.system_id) {
          this.system_data = this.response[key].system_data
        }
      }
    })
    .catch(e => {
      this.errors.push(e)
    })
  }

Why does the if never trigger??

Answer 1

The problem maybe with mismatch datatypes. === operator will return false for if(1234==="1234"). Use == operator