How to show nested JSON data in VueJS?

Question

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>

Анатолий Якимов · Accepted Answer · 2022-07-13 16:10:33Z

2

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 Jul 13, 2022 at 16:10

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

765 bronze badges

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

Comments

Rohìt Jíndal · Accepted Answer · 2022-07-13 14:26:21Z

You have to change the way of iterating the objects in the template and you will be good to go. Here is a live demo :

new Vue({
  el: '#app',
  data: {
    countryData: {
      "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"
            }
          }
        }
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<div id="app">
  <div width="80%" v-for="(countryDetails, key) in countryData.country" :key="key" class="container">
    <div style="margin-top: 50px">
      <h4>{{ countryDetails.countryName }}</h4>
      <table>
        <thead>
          <tr>
            <th>Country</th>
            <th>Product</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(productList, productKey) in countryDetails.items" :key="productKey">
            <td style="visibility: visible">{{ productList.name }}</td>
            <td style="visibility: visible">{{ productList.price }}</td>
            <td style="visibility: visible">{{ productList.productImage }}</td>
          </tr>            
        </tbody>
      </table>
    </div>
  </div>
</div>

Abdullah Qureshi · Accepted Answer · 2022-07-13 14:20:36Z

1

You can use v-if directive to check either object is empty or not. Moreover, best solution is that properly process the json data to javascript Arrays in created() or mounted() hook then display it.

Thanks.

answered Jul 13, 2022 at 14:20

Abdullah Qureshi

646 bronze badges

Collectives™ on Stack Overflow

How to show nested JSON data in VueJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related