iterating json data with Vue js v-for

Question

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

Could you show an abbreviated version of the actual JSON?

Bert
– Bert

2017-04-11 18:08:07 +00:00
Commented Apr 11, 2017 at 18:08 — Bert
– Bert, Commented Apr 11, 2017 at 18:08
do you iterate through youObject.Table ?

Happyriri
– Happyriri

2017-04-11 18:30:06 +00:00
Commented Apr 11, 2017 at 18:30 — Happyriri
– Happyriri, Commented Apr 11, 2017 at 18:30
@SLYcee yes I am iterating obj.Table

sm12
– sm12

2017-04-11 18:34:22 +00:00
Commented Apr 11, 2017 at 18:34 — sm12
– sm12, Commented Apr 11, 2017 at 18:34

Happyriri · Accepted Answer · 2017-04-12 08:09:32Z

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>

I am getting this is the console window - unable to get property '2' of undefined or null reference
but if I do this then I am seeing data in my page - {{ row }}
@sagarmajumdar ok i updated my code. Use {{ getRowIndex(row, 2) }} and not {{ row[2] }}

Collectives™ on Stack Overflow

iterating json data with Vue js v-for

1 Answer 1

-- UPDATED --

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

-- UPDATED --

3 Comments

Related