After receiving data from the API, I am faced with an object structured like this:
response = {
"0": [
{
"description": "basket",
"color": "red"
},
{
"description": "pillow",
"color": "blue"
},
{
"description": "armchair",
"color": "white"
}
],
"1" : [
{
"description": "shirt",
"color": "black"
},
{
"description": "pants",
"color": "blue"
}
]
}
My goal is to showcase this data in my view: https://i.sstatic.net/vaTjk.png
// controller.js
self.catKeys= Object.keys(response)
self.catValue= Object.values(response)
// view.html
<div ng-repeat="cat in ctrl.catKeys" class="col-md-3"> {{ cat }} </div>
<div ng-repeat="val in ctrl.catValue" class="col-md-9">
{{ val[index].description }} {{ val[index].color}}
</div>
I've experimented with various methods, but still struggling to make it work..please help me out :(