I have an example Json data like so:
{
"data":{
"1":{
"color":"red",
"size":"big"
},
"2":{
"color":"red",
"size":"big"
},
"3":{
"color":"red",
"size":"big"
},
"4":{
"color":"red",
"size":"big"
},
"5":{
"color":"red",
"size":"big"
}
}
}
My attempt was to display only the numbers 1, 2, 3, 5 by using this code:
<div v-for = "pos in this.breakdown" :key = "pos">
<p>{{pos}}</p>
</div>
Unfortunately, it ended up showing the values instead of just the numbers:
{ "color": "red", "size": "big" }
{ "color": "red", "size": "big" }
{ "color": "red", "size": "big" }
{ "color": "red", "size": "big" }
{ "color": "red", "size": "big" }
After converting it into a Javascript's Map of Maps, and trying to display it, nothing showed up as expected:
function jsonToMap(jsonString) {
var jsonObject = JSON.parse(jsonString);
var dataObject = jsonObject.data;
var dataMap = new Map(Object.entries(dataObject));
var resultMap = new Map();
for (const pos of dataMap.keys()) {
console.log(pos);
var posMap = new Map(Object.entries(dataMap.get(pos)));
resultMap.set(pos, posMap);
}
console.log("done!");
return resultMap;
}
<div v-for = "number in this.breakdownTable" :key = "number">
<p>Number: {{number}}</p>
<div v-for = "pair in this.breakdownTable" :key = "pair.number">
<p>{{pair}} = {{this.breakdownTable.get(number).get(pair)}}</p>
</div>
</div>
Acknowledging Adri1's contribution, I modified my code to this successful version:
<div v-for="(obj, pos) in this.breakdown" :key="pos">
<p>{{ pos }}: </p>
<div v-for = "(obj2, pos2) in obj" :key="pos2">
<p>{{obj2}} = {{pos2}}</p>
</div>
</div>
This modification produced the desired output:
1:
red = color
big = size
2:
red = color
big = size
3:
red = color
big = size
4:
red = color
big = size
5:
red = color
big = size