[FIXED] How to show nested JSON data in VueJS?

Issue

I've been studying VueJS and I wanted to draw a table using a JSON file. I was able to make a table as below, but I just cannot figure out how I can remove those 3 empty rows above the actual data.

Is there anything I can do here?

test.json

{
  "country": {
    "us": {
      "countryName": "USA",
      "items": {
        "itemId0001": {
          "name": "Basketball",
          "price": 500,
          "productImage": "https://google.com/image.png"         
        },
        "itemId0002": {
          "name": "Soccer ball",
          "price": 800,
          "productImage": "https://google.com/image.png"
        }
      }
    }
  }
}

my vue file:

<template>
<div width="80%" v-for="regList in data" :key="regList" class="container">
  <div style="margin-top: 50px" v-for="countryList in regList" :key="countryList"><h4>{{ countryList.countryName }}</h4>    
      <table>
        <thead>
          <tr>
              <th>Country</th>
              <th>Product</th>
              <th>Price</th>
          </tr>
        </thead>
        <tbody v-for="productList in countryList" :key="productList">
            <tr v-for="itemList in productList" :key="itemList">
              <td style="visibility: visible">{{ itemList.name }}</td>
              <td style="visibility: visible">{{ itemList.price }}</td>
              <td style="visibility: visible">{{ itemList.productImage }}</td>
            </tr>            
        </tbody>
      </table>
  </div>
</div>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

</template>

<script> 
  import jsonData from '../assets/test.json'
  export default {
    data(){
      return{
        data: jsonData
      }
    }
  }

</script>

Solution

Do not iterable <tbody>, in one table use one tag <tbody> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody)

empty rows appears becouse you itagble countryList (not countryList.items), and v-for walk to you property countryName, that contains 'USA' (3 symbols) and whrite to you 3 epty rows.

here is a the solution for you: https://codesandbox.io/s/divine-cherry-089ken?file=/src/App.vue

Answered By - Анатолий Якимов

Answer Checked By - Senaida (PHPFixing Volunteer)