[Vuejs]-Why the find function is not working in comparing two data properties in Vue?

by

3👍

✅

It’s because map returns an array. To fix your code all you have to do is to check if x contains your id.

var app = new Vue({
  el: "#app",
  data() {
    return {
      statesJson: {
        "type": "FeatureCollection",
        "features": [
          { "rank":"1", "NAME_1": "Andaman and Nicobar"},
          { "rank":"2", "NAME_1": "Rajasthan"},
          { "rank":"3", "NAME_1": "Orissa"},
        ]
      },
    
      stateGDP: [
        { "Id":"1", "NAME_1": "Andaman and Nicobar","2000":"48"},
        { "Id":"2", "NAME_1": "Rajasthan","2000":"87"},
        { "Id":"3", "NAME_1": "Orissa","2000":"25"},
      ],   
    }
  },
  computed:{ 
    check(){
      let state = this.statesJson.features.map(feature => {
        return this.stateGDP.find(state => state.Id === feature.rank);
      });
      
      return state;
    }
  },
 })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <strong>Total object</strong><hr/>
  <div v-for="state in check">
    {{ state }}
  </div>
  
  <br/>
  
  <strong>Seperate variables</strong><hr/>
  <div v-for="state in check">
    Id = {{ state["Id"] }}<br/>
    Name_1 = {{ state["NAME_1"] }}<br/>
    2000 = {{ state["2000"] }}
  </div>
</div>

Leave a comment