Display nested arrays in vue

Question

I'm pretty new to vue and can get my way around this.

I'm receiving some JSON like this:

[
  {
    "name": "jack",
    "age": "twenty",
    "Colors": {
      "favorite": "blue",
      "hate": "orange",
      "surprise": "violet"
    },
   
    "Food": {
     "favorite": "barbecue",
      "hate": "broccoli",
      "surprise": "pasta"
      "new": [
        "pizza",
        "ice cream"
      ]
    }
  }
]

And I'm trying to get this:

Name: Jack

Age: Twenty

Colors

Favorite: Blue
Hate: Orange
Surprise: Violet

Food

Favorite: Barbecue
Hate: Broccoli
Surprise: Pasta
New:
- Pizza
- Ice cream

HTML

<p><strong>Name:</strong> Jack</p>
<p><strong>Age:</strong> Twenty</p>
<p><strong>Colors</strong>
   <ul>
      <li><strong>Favorite:<strong> Blue</li>
      <li><strong>Hate:<strong> Orange</li>
      <li><strong>Surprise:<strong> Violet</li>
   </ul>
</p>
<p><strong>Food</strong>
   <ul>
      <li><strong>Favorite:<strong> Barbecue</li>
      <li><strong>Hate:<strong> Broccoli</li>
      <li><strong>Surprise:<strong> Pasta</li>
      <li><strong>New:<strong>
         <ul>
            <li>Pizza</li>
            <li>Ice cream</li>
        </ul>
     </li>
   </ul>
</p>

So I did this:

HTML

  <div v-for="(item, index) in items" :key="index">
       <div>
          <p><strong>{{title}}</strong> {{item}}</p>
          <p v-for="(category, index) in item" :key="index"><strong>{{index}}</strong> {{category}}</p>
       </div>
    </div>

Script

import axios from 'axios'
    export default {
        name: 'theComponent',
        props: {},
        data() {
            return {
                items: []
            }
        },
        mounted() {
            const url = 'https://api-json-url'
            axios.get(url)
                .then(response => {
                    this.items= response.data[0]
                })
        }
    };

But I'm getting this:

Name: Jack

0:J

1:a

2:c

3:k

Age: Twenty

0:T

1:w

2:e

3:n

1:t

2:y

Colors: {"favorite": "blue","hate": "orange","surprise": "violet"}

Favorite: Blue
Hate: Orange
Surprise: Violet

Food {"favorite": "barbecue","hate": "broccoli","surprise": "pasta","new":["pizza","ice cream"]}

Favorite: Barbecue
Hate: Broccoli
Surprise: Pasta
New:["pizza","ice cream"]

HTML


    <p><strong>Name:</strong> Jack</p>
    <p><strong>0</strong>J</p>
    <p><strong>1</strong>a</p>
    <p><strong>2</strong>c</p>
    <p><strong>3</strong>k</p>
    <p><strong>Age:</strong> Twenty</p>
    <p><strong>0</strong>T</p>
    <p><strong>1</strong>w</p>
    <p><strong>2</strong>e</p>
    <p><strong>3</strong>n</p>
    <p><strong>1</strong>t</p>
    <p><strong>2</strong>y</p>
    <p><strong>Colors</strong> {"favorite": "blue","hate": "orange","surprise": "violet"}</p>
    <p>
       <ul>
          <li><strong>Favorite:<strong> Blue</li>
          <li><strong>Hate:<strong> Orange</li>
          <li><strong>Surprise:<strong> Violet</li>
       </ul>
    </p>
    <p><strong>Food</strong> {"favorite": "barbecue","hate": "broccoli","surprise": "pasta","new":["pizza","ice cream"]}</p>
    <p>
       <ul>
          <li><strong>Favorite:<strong> Barbecue</li>
          <li><strong>Hate:<strong> Broccoli</li>
          <li><strong>Surprise:<strong> Pasta</li>
          <li><strong>New:<strong>["pizza","ice cream"]</li>
       </ul>
    </p>

I think that I need something like isArray() with some v-if just before the first v-for. But I can't get there. I've tried with length also, but no.

You need to access item.name, item.category, etc. in the template directly. If you don't know the key names, you need to use e.g. Object.keys to get the keys to iterate through. Do you want to recursively go through each element? Then, you need to check if the value is an object, an array or a primitive value/string. — ssc-hrep3
– ssc-hrep3, Commented Jul 17, 2020 at 1:47

Karl L · Accepted Answer · 2020-07-17 02:17:48Z

Ive done a rough version based on your example on jsFiddle: Click here

So basically you need to loop through the items and check if the value is array or object then you'll have to loop through them again like:

<div id="app">
  <div v-for="(item, index) in Object.entries(items[0])" :key="index">
    <div v-if="typeof item[1] !='object'">
      <p>
        <strong>{{item[0]}}:</strong> {{item[1]}}
      </p>
    </div>
    <div v-else>
      <p>
        <strong>{{item[0]}}:</strong>
        <ul>
          <li v-for="(innerItem, innerIndex) in  Object.entries(item[1]) ">
            <div v-if="!Array.isArray(innerItem[1])">
              <p>


                <strong>{{innerItem[0]}}:</strong>
                <span>{{innerItem[1]}}</span>
              </p>


            </div>
            <div v-else>
              <strong>{{innerItem[0]}}:</strong>

              <ul>
                <li v-for="(it2,in2) in innerItem[1]">{{it2}}</li>
              </ul>
            </div>
          </li>
        </ul>
      </p>
    </div>
  </div>


</div>

Collectives™ on Stack Overflow

Display nested arrays in vue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related