As a newcomer to vue, I've been navigating my way around with some success.
Lately, I've been dealing with JSON data structured like this:
[
{
"name": "jack",
"age": "twenty",
"Colors": {
"favorite": "blue",
"hate": "orange",
"surprise": "violet"
},
"Food": {
"favorite": "barbecue",
"hate": "broccoli",
"surprise": "pasta",
"new": [
"pizza",
"ice cream"
]
}
}
]
My goal is to present the data in a more readable format like so:
Name: Jack
Age: Twenty
Colors
- Favorite: Blue
- Hate: Orange
- Surprise: Violet
Food
- Favorite: Barbecue
- Hate: Broccoli
- Surprise: Pasta
- New:
- Pizza
- Ice cream
Here's the HTML code I used:
<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>
Initially, I attempted to use the following code:
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]
})
}
};
However, I encountered some issues:
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've considered using isArray() and implementing some v-if logic before looping through the data. Unfortunately, my attempts haven't been successful. I even tried checking for array length without any luck.