angularJS - iterating through JSON object

Question

I have a nested JSON "object" called znanja that I want to display on my webpage. It will contain a number of values that I want to make into a list. Basically I'm building a portfolio and want to list my skills. So far I've managed to display the title, and the whole object, or by calling a specific one (for instance {{ znanje.ena }}), but I can't figure out how to display them without the attribute name. If I only call {{ znanje }}, I get them listed like in the JSON. Is there a angularJS directive I can do this with? I'm new to angular, so any help is appreciated.

my view:

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="znanje in skill.znanja">{{ znanje }}</p>
</div>

my data:

  $scope.skills = [
  {
      title: "Code Knowledge",
      znanja : [{
        ena : "Javascript",
        dva : "HTML",
        tri : "CSS",
        stiri : "SASS"
      }]
  },
  {
      title: "Base Code Knowledge",
      znanja : [{
        ena : "Java",
        dva : "PhP"
      }]
  },
  {
      title: "Data",
      znanja : [{
        ena : "MongoDB",
        dva : "MySQL"
      }]
  }
  ];

PS: I've named the znanja attributes ena, dva, tri, stiri instead of 1, 2, 3, 4 to be able to call them in the html.

Should note that is a javascript object, not a json object.

aw04
– aw04

2015-12-29 13:54:25 +00:00
Commented Dec 29, 2015 at 13:54 — aw04
– aw04, Commented Dec 29, 2015 at 13:54

Pankaj Parkar · Accepted Answer · 2015-12-29 14:08:50Z

2

The object which you wanted to apply a loop is nothing but the 1st element in znanja array, so you should be specify skill.znanja[0] instead of skill.znanja.

By doing this you ng-repeat will iterate through each property of object and {{znanje}} will print the value of each property of znanja[0]

Markup

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="znanje in skill.znanja[0]">{{ znanje }}</p>
</div>

edited Dec 29, 2015 at 14:08

answered Dec 29, 2015 at 14:03

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Jaanus · Accepted Answer · 2015-12-29 13:55:50Z

2

It is possible to get ngRepeat to iterate over the properties of an object using the following syntax:

<div ng-repeat="(key, value) in skill.znanja"> ... </div>

https://docs.angularjs.org/api/ng/directive/ngRepeat

answered Dec 29, 2015 at 13:55

Jaanus

16.6k52 gold badges150 silver badges206 bronze badges

Comments

Dagm Fekadu · Accepted Answer · 2015-12-29 13:59:50Z

1

In order to display the attributes you need a DOM element and a DOM element need a specific value to render so You have to manual at least for one iteration specifically call attributes. How ever if you have any repetitions you can include it using ng-repeat like you have done.

That is if you want to display each attribute on the html page individually and later want to access it but if you just want to show as json object that will be as easy as passing the json

answered Dec 29, 2015 at 13:59

Dagm Fekadu

6101 gold badge8 silver badges23 bronze badges

Comments

Satish · Accepted Answer · 2015-12-29 14:10:36Z

1

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="(key,value) in skill.znanja[0]">{{key}} <b>:</b> {{value}}</p>
</div>

answered Dec 29, 2015 at 14:10

Satish

5372 gold badges9 silver badges21 bronze badges

Comments

Michael B · Accepted Answer · 2015-12-29 14:15:18Z

0

(tested) combined both znanja-object 0 and the value:

    <div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>

    <p ng-repeat="(key, value) in skill.znanja[0] ">{{ value }}</p>
    </div>

answered Dec 29, 2015 at 14:15

Michael B

114 bronze badges

Comments

Ethnar · Accepted Answer · 2015-12-30 09:17:04Z

0

The simplest and best way to solve this issue is by changing your data structure. Simply remove the wrapping array around the lists you iterate on, turning them into object map:

$scope.skills = [
{
  title: "Code Knowledge",
  znanja : {
    ena : "Javascript",
    dva : "HTML",
    tri : "CSS",
    stiri : "SASS"
  }
},
{
  title: "Base Code Knowledge",
  znanja : {
    ena : "Java",
    dva : "PhP"
  }
},
{
  title: "Data",
  znanja : {
    ena : "MongoDB",
    dva : "MySQL"
  }
}
];

If you did not intend to use that array in any way (all examples contain only one element), then there's no reason for having it there.

There's no need to change anything in your original ng-repeat that way.

answered Dec 30, 2015 at 9:17

Ethnar

6674 silver badges10 bronze badges

Collectives™ on Stack Overflow

angularJS - iterating through JSON object

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related