AngularJS access JSON index values dynamically

Question

My scope data:

$scope.data = 
 "category": [{
"name": "cat1",
"behaviour": "normal",
"selected": 0,
"values": [{
    "label": "define",
    "count": 6
}]
}, {
"name": "cat2",
"behaviour": "normal",
"selected": 0,
"values": [{
    "label": "type",
    "count": 6
}]
}, {
"name": "Company",
"behaviour": "multi-select",
"selected": 0,
"values": [{
    "label": "VW",
    "count": 4
}, {
    "label": "Renault",
    "count": 1
}, {
    "label": "Fiat",
    "count": 1
}]
}, {
"name": "Make",
"behaviour": "multi-select",
"selected": 0,
"values": [{
    "label": "Gold",
    "count": 3
}]
}, {
"name": "Color",
"behaviour": "normal",
"selected": 0,
"values": [{
    "label": "White",
    "count": 3
}, {
    "label": "Blue",
    "count": 2
}, {
    "label": "Green",
    "count": 1
}]
}]

How can I access the "name":"value" without using indexes? as the data might grow and change and I don't want to assign an index value anywhere? I'd still want to filter such as:

| {name: 'Make'}: true)

in my mark up to show

possible duplicate of Using ng-repeat on JSON containing JSON — arman1991
– arman1991, Commented Jun 3, 2015 at 13:26

carton · Accepted Answer · 2015-06-03 13:35:29Z

1

So the json is incorrect, i corrected it (next time you can use this site to see if your json is valid JSONVALIDATOR) If you want to access at value of the name do this

In your controller :

$scope.data = [
{
    "name": "cat1",
    "behaviour": "normal",
    "selected": 0,
    "values": [
        {
            "label": "define",
            "count": 6
        }
    ]
},
{
    "name": "cat2",
    "behaviour": "normal",
    "selected": 0,
    "values": [
        {
            "label": "type",
            "count": 6
        }
    ]
},
{
    "name": "Company",
    "behaviour": "multi-select",
    "selected": 0,
    "values": [
        {
            "label": "VW",
            "count": 4
        },
        {
            "label": "Renault",
            "count": 1
        },
        {
            "label": "Fiat",
            "count": 1
        }
    ]
},
{
    "name": "Make",
    "behaviour": "multi-select",
    "selected": 0,
    "values": [
        {
            "label": "Gold",
            "count": 3
        }
    ]
},
{
    "name": "Color",
    "behaviour": "normal",
    "selected": 0,
    "values": [
        {
            "label": "White",
            "count": 3
        },
        {
            "label": "Blue",
            "count": 2
        },
        {
            "label": "Green",
            "count": 1
        }
    ]
}
];

In your HTML

      <div ng-repeat="d in data"> {{d.name}} </div>

If you want to display values of the object with the name 'Company' you can do this like in my working CodePen :

Just add a new ng-repeat :

   <div ng-repeat="d in data"> {{d.name}} 
         <div ng-if="d.name == 'Company'" ng-repeat="da in d.values">{{da.label}}</div>      
  </div>

edited Jun 3, 2015 at 13:35

answered Jun 3, 2015 at 13:17

carton

1,1689 silver badges17 bronze badges

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

4 Comments

Poiro Over a year ago

I need to be able to specify however that name=Company for example

carton Over a year ago

If this is Company you do something different? Is it that you mean?

Poiro Over a year ago

So no, I would do for example: <div ng-repeat="d in data | {name: 'Company'}: true)"> and show a count so value for example

carton Over a year ago

Codepen added to my answer

Oam Psy · Accepted Answer · 2015-06-03 13:18:25Z

0

First off, the format of your data is not correct JSON format, run it through an online validator.

To access the element, you would simply be able to through:

<li ng-repeat="item in data">
    {{ item.name }} {{ item.behaviour }} etc...
</li>

Get rid of category within $scope.data... just let it be an array like a typical JSON value.

answered Jun 3, 2015 at 13:18

Oam Psy

8,66335 gold badges97 silver badges168 bronze badges

2 Comments

Oam Psy Over a year ago

@carton - ha, must have posted at the same time.. Simple enough issue

Poiro Over a year ago

I can't play about with the structure :)

Collectives™ on Stack Overflow

AngularJS access JSON index values dynamically

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related