CODEWITHSUNDEEP
javascriptvue.jsvuejs2
HaryanviDeveloper
HaryanviDeveloper

Reputation: 1135

How to print JSON data in a loop in Vue.js

I have this JSON Data

{
"districtData": {
    "East Delhi": {
        "lastupdatedtime": ""
    },
    "South West Delhi": {
        "lastupdatedtime": ""
    },
    "West Delhi": {
        "lastupdatedtime": ""
    },
    "Delhi": {
        "lastupdatedtime": ""
    },
    "South Delhi": {
        "lastupdatedtime": ""
    },
    "North East Delhi": {
        "lastupdatedtime": ""
    },
    "North Delhi": {
        "lastupdatedtime": ""
    },
    "North West Delhi": {
        "lastupdatedtime": ""
    },
    "Unknown": {
        "lastupdatedtime": ""
    }
  }
}

I want to print it in a loop and want to display like

East Delhi    lastupdatedtime 
North west   lastupdatedtime

and so on

<tr v-for="data in jsonData" :key="data.id"> 
   <td>{{ data}}</td>
</tr>

I tried but I am getting only lastupdatedtime. Can anyone help? Thanks in advance.

Upvotes: 0

Views: 2327

Answers (4)

Midas Dev
Midas Dev

Reputation: 121

If the jsonData is like this.

jsonData = {
    "districtData": {
        "East Delhi": {
            "lastupdatedtime": ""
        },
        "South West Delhi": {
            "lastupdatedtime": ""
        },
        "West Delhi": {
            "lastupdatedtime": ""
        },
        "Delhi": {
            "lastupdatedtime": ""
        },
        "South Delhi": {
            "lastupdatedtime": ""
        },
        "North East Delhi": {
            "lastupdatedtime": ""
        },
        "North Delhi": {
            "lastupdatedtime": ""
        },
        "North West Delhi": {
            "lastupdatedtime": ""
        },
        "Unknown": {
            "lastupdatedtime": ""
        }
    }
}

Please try below 2 methods.

It is to show all items in the object

<tr v-for="(data, index) in jsonData.districtData" :key="data.id"> 
    <td> {{ index }} </td>
    <template v-for="(item, index) in data" :key="index">
        <td> {{item}} </td>
    </template>
</tr>

It is to show lastupdatedtime.

<tr v-for="(data, index) in jsonData.districtData" :key="data.id"> 
    <td> {{ index }} </td>
    <td> {{data.lastupdatedtime}} </td>
</tr>

Upvotes: 0

zia muhammad
zia muhammad

Reputation: 17

you can also use 

 <tr v-for="(data,index) in jsonData" :key="index"> 
  <td>{{ data.districtData}}</td>
  </tr>

Upvotes: 1

aby.js
aby.js

Reputation: 179

There are two imporatnt fixes required in this code:

  1. Since there is no id in data you should use city name instead as it is unique
  2. Also, you should use the (value, key) in object approach for your problem.

An example of this code can be:

<div id="app">
  <ul>
    <li v-for="(cityData, city) in districtData" :key="city">
      {{city}} - {{cityData.lastupdatedtime}}
    </li>
  </ul>
</div>

you can also use this pen for testing: https://codepen.io/abdullah-shabaz/pen/MWwZQYo

Upvotes: 1

Mr Khan
Mr Khan

Reputation: 2292

Ok so for this to work you must have a proper formatted object. 

{
"districtData": {
    "East Delhi": {
        "lastupdatedtime": "",
        "id": 1
    },
    "South West Delhi": {
        "lastupdatedtime": "",
        "id": 2
    },
    "West Delhi": {
        "lastupdatedtime": ""
         "id": 3
    },
    "Delhi": {
        "lastupdatedtime": "" 
        "id": 4
    },
    "South Delhi": {
        "lastupdatedtime": "" 
         "id": 5
    },
    "North East Delhi": {
        "lastupdatedtime": ""
       "id": 7
    }
}

and you key districtData will be use to loop through

Upvotes: 0

Related Questions