CODEWITHSUNDEEP
jsonvue.jsv-for
sm12
sm12

Reputation: 125

iterating json data with Vue js v-for

I have JSON data structured as follows:

Table - 
    0 -
          0 - "xyz"
          1 - "abc"
          **2 - 45**
          3 - "ab"
          ...
    1 -   ...
    2 -   ...
    3 -   ...
    ....

I am trying to get the value of the index 2 of the inner indexed data for every outer index. How do I do it with v-for. I have tried it this way but it is not working.

<table>
   <tr v-for = "row in rows">
      <td>{{ row[2] }}</td>
   </tr>
</table>

I am adding an abbr version of the actual data

{
  "Table":[
     [
       null,
       3,
       47,
       "new planning",
       "planning_new_0314",
       null,
       .....
     ],
     [ + ],
     [ + ],
     ...

   ]
}

I am getting the following error in the console window of IE 11 - Unable to get property '2' of undefined or null reference

But I am seeing data in my page if I write this - 

<tr v-for = "row in rows">
      <td>{{ row }}</td>
   </tr>

How do I do this? Thanks

Upvotes: 1

Views: 8279

Answers (1)

Happyriri
Happyriri

Reputation: 4443

Your code :

 <td>{{ row[2] }}</td>

... is a good way to do it.

See this code :

var object = {
  "Table":[
     [
       null,
       3,
       47,
       "new planning",
       "planning_new_0314",
       null,
       //.....
     ],
     [],
     [],
     //...

   ]
}

new Vue({
  el: "#app",
  data: function() {
    return {
    	table: object.Table
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
  
  <div v-for="row in table">
    {{ row[2] }}
  </div>
  
</div>

-- UPDATED --

Maybe in your case obj.Table has a row without index 2. I test this case with the code above and it works.

But if you have problem with IE 11 try this code that verify that row and row[index] are not undefined (not sure that solve your problem...) :

var object = {
  "Table":[
     [
       null,
       3,
       47,
       "new planning",
       "planning_new_0314",
       null,
       //.....
     ],
     [1,2,3,4],
     [1],
     //...

   ]
}

new Vue({
  el: "#app",
  data: function() {
    return {
    	table: []
    }
  },
  methods: {
    getTableDatas: function() {
      this.table = object.Table;
    },
    getRowIndex: function(row, index) {
      //you can/should replace "'!!no index ' + index" by empty string !
      return ((typeof row !== 'undefined') && (typeof row[index] !== 'undefined'))
             ? row[index] : '!!no index ' + index;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
Comment : The third row has no index "2".<br/>
  <button @click="getTableDatas">Get table datas</button>
  <div v-for="row in table">
    {{ getRowIndex(row, 2) }}
  </div>
  
</div>

Upvotes: 1

Related Questions