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

Question

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.

What is jsonData here? also the "JSON Data" you have shared has no id property then how are you assigning :key="data.id"? — palaѕн
– palaѕн, Commented Mar 28, 2020 at 7:48
i am fetching data using api call and storing it into jsonData object and :key="data.id" is necessary in vuejs otherwise it will not allow and through error — HaryanviDeveloper
– HaryanviDeveloper, Commented Mar 28, 2020 at 7:56
@LR yes but it must have id in the obj as well for this to work — Mr Khan
– Mr Khan, Commented Mar 28, 2020 at 7:57

aby.js · Accepted Answer · 2020-03-28 08:41:51Z

1

There are two imporatnt fixes required in this code:

Since there is no id in data you should use city name instead as it is unique
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

answered Mar 28, 2020 at 8:41

aby.js

1795 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aby.js Over a year ago

Glad to be of help :)

zia muhammad · Accepted Answer · 2020-03-28 08:43:57Z

1

you can also use

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

edited Mar 28, 2020 at 8:43

answered Mar 28, 2020 at 8:34

zia muhammad

172 silver badges10 bronze badges

3 Comments

HaryanviDeveloper Over a year ago

thanks @ziakhan but it is displaying whole data as it is

zia muhammad Over a year ago

if still you didnt understand then send me your proper array i will interpret for you, the way you want

HaryanviDeveloper Over a year ago

Thanks you below code work for me thankyo for your time

Mr Khan · Accepted Answer · 2020-03-28 08:01:21Z

0

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

answered Mar 28, 2020 at 8:01

Mr Khan

2,3061 gold badge9 silver badges27 bronze badges

4 Comments

HaryanviDeveloper Over a year ago

thansk @Mr Khan, but i am fetching data from third party api i can't add id in that

Mr Khan Over a year ago

you can still append this id to the response object.

HaryanviDeveloper Over a year ago

how to append id any suggesstion?

HaryanviDeveloper Over a year ago

Thankyou for your time i got output

Midas Dev · Accepted Answer · 2020-03-28 08:48:41Z

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>

index is showing "districtData" and data is showing whole data as it is

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

3 Comments

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

4 Comments

1 Comment

Related