How do i make a nested array in angular

Question

Following the tutorial on docs.angularjs.org, step 2. How do I update this array to a nested one?

This is the basic array:

'use strict';

/* Controllers */

function PhoneListCtrl($scope){
    $scope.phones = [

        {"name" : "Samsung Galaxy S4",
        "snippet" : "Operativsystem : Android 4.2.2"
        }
    ]
}

This illustrates what i want to do:

'use strict';

/* Controllers */

function PhoneListCtrl($scope){
    $scope.phones = [

        {"name" : "Samsung Galaxy S4",
            "snippet" : {"Operativsystem" : "Android 4.2.2",
                            "Skärm" : "4,99 tum",
                            "CPU" : "Quad-core",
                            "Kamera, bak" : "13 MP",
                            "Kamera, fram" : "1,9 MP",
                            "Övrigt" : "Närfältskommunikation (Eng. near field communication, NFC)"
                            }
        }
    ]
}

My current HTML template:

<body ng-controller ="PhoneListCtrl">

<h1>The future of mobile devices</h1>

  <ul>
  <li ng-repeat="phone in phones">
  <h3>{{phone.name}}</h3>
  <p>{{phone.snippet}}</p>
</li>
</ul>

 <p>Total number of phones: 2</p>
</body>

I see that i can use {{phone.snippet.Operativsystem}} to get the first element. But I also want the label Operativsystem to be printed in the HTML, like so:

Operativsystem: Android 4.2.2
Skärm: 4,99 tum
CPU: Quad-core
Kamera, bak: 13 MP Kamera, fram: 1,9 MP
Övrigt: Närfältskommunikation (Eng.near field communication, NFC)

I realize I can just do like below, but that still does not print the "attribute names/keys" in the HTML only the values

  <ul>
    <li ng-repeat="phone in phones">
    <h3>{{phone.name}}</h3>
    <ul>
        <li ng-repeat="key in phone.snippet">
            {{key}}
        </li>
    </ul>
    <p>{{phone.snippet}}</p>
</li>
</ul>

rogerz · Accepted Answer · 2013-09-26 08:02:16Z

1

You may nest ng-repeat

<ul>
  <li ng-repeat="phone in phones">
    <h3>{{phone.name}}</h3>
    <p ng-repeat="(key, value) in phone.snippet">{{key}}:{{value}}</p>
  </li>
</ul>

See http://plnkr.co/edit/GpFY0u?p=preview

answered Sep 26, 2013 at 8:02

rogerz

1,0819 silver badges18 bronze badges

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

Comments

Aditya Singh · Accepted Answer · 2013-09-26 07:52:41Z

Try this out:- http://jsfiddle.net/adiioo7/DgWnK/1/

HTML:-

<body ng-app ng-controller="PhoneListCtrl">

<h1>The future of mobile devices</h1>

    <ul>
        <li ng-repeat="phone in phones">
             <h3>{{phone.name}}</h3>

            <ul>
                <li>{{phone.snippet.Operativsystem}}</li>
                <li>{{phone.snippet.Skarm}}</li>
                <li>{{phone.snippet.CPU}}</li>
                <li>{{phone.snippet.Kamerabak}}</li>
                <li>{{phone.snippet.Kamerafram}}</li>
                <li>{{phone.snippet.Ovrigt}}</li>
            </ul>
        </li>
    </ul>
    <p>Total number of phones: 2</p>
</body>

JS:-

'use strict';

/* Controllers */

function PhoneListCtrl($scope) {
    $scope.phones = [

    {
        "name": "Samsung Galaxy S4",
            "snippet": {
            "Operativsystem": "Android 4.2.2",
                "Skarm": "4,99 tum",
                "CPU": "Quad-core",
                "Kamerabak": "13 MP",
                "Kamerafram": "1,9 MP",
                "Ovrigt": "Närfältskommunikation (Eng. near field communication, NFC)"
        }
    }]
}

I think OP needs to print the labels too. Like Operativsystem, Skarm, CPU et-al...
You may get values by ng-repeat="(key, value) in phone.snippet"

Nitu Bansal · Accepted Answer · 2013-09-26 09:26:04Z

please try this it will work

in html

 <body ng-app ng-controller="PhoneListCtrl">

  <h1>The future of mobile devices</h1>

<ul>
    <li ng-repeat="phone in phones">
         <h3>{{phone.name}}</h3>

        <ul>
             <li ng-repeat="sn in phone.snippet">
                 {{sn.name}} : {{sn.value}}
            </li>
        </ul>
    </li>
</ul>
<p>Total number of phones: 2</p>
</body>

JS

      'use strict';

    /* Controllers */

  function PhoneListCtrl($scope) {
$scope.phones = [

{
    "name": "Samsung Galaxy S4",            
    "snippet": [{"name":"Operativsystem","value":"Android 4.2.2"},
                {"name":"Skarm","value":"4,99 tum"},
                {"name":"CPU","value":"Quad-core"},
                {"name":"Kamerabak","value":"13 MP"},
                {"name":"Kamerafram","value":"1,9 MP"},
                {"name":"Ovrigt","value":"Närfältskommunikation (Eng. near field communication, NFC)"}]

    }
]

}

please check fiddle http://jsfiddle.net/DgWnK/6/

Collectives™ on Stack Overflow

How do i make a nested array in angular

3 Answers 3

Comments

Try this out:- http://jsfiddle.net/adiioo7/DgWnK/1/

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Try this out:- http://jsfiddle.net/adiioo7/DgWnK/1/

3 Comments

Comments

Related