Как напечатать JSON данные в al oop in Vue. js

Question

У меня есть JSON Данные

{
"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": ""
    }
}

}

Я хочу напечатать его в al oop и хочу отобразить как

East Delhi    lastupdatedtime 
North west   lastupdatedtime

и так далее

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

Я пытался, но получаю только lastupdatedtime. Кто-нибудь может помочь? Заранее спасибо.

Answer 1

В этом коде требуется два важных исправления:

1. Поскольку в данных нет id, следует использовать название города, поскольку оно уникально
2. Кроме того, вы следует использовать (value, key) in object подход к вашей проблеме.

Примером этого кода может быть:

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

Вы также можете использовать эту ручку для тестирования: https://codepen.io/abdullah-shabaz/pen/MWwZQYo

Answer 2

Если jsonData похож на это.

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": ""
        }
    }
}

Пожалуйста, попробуйте ниже 2 метода.

Это показать все элементы в объекте

<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>

Это это показывать время последнего обновления.

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

Answer 3

Вы также можете использовать

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

Answer 4

Хорошо, чтобы это работало, у вас должен быть правильно отформатированный объект.

{
"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
    }
}

, и вы будете использовать ключ locationData от l oop до