How to use foreach with AngularJS on HTML

Question

How do I use a foreach statment in angular js? My current data is printing out as a json format. I want to make it printed out on new lines.

Html

<p>{{controller.greeting.custinfo}}</p>

 //attempt
<p ng-repeat= >{{controller.greeting.custinfo}}</p>

Output on UI

{"id":null,"biling_address":"null","billing_state":"FL","ip_Addresses":["123:111:2101","","NULL"],name":"jimmmy"}

java output

System.out.println(custinfo);
demo.model.cert@ba1983a

How can I use a foreach statement to display the data in new lines? Rather than a json format.

I know how to do this with thymeleaf,example below

<table th:each="custinfo : ${custinfo}">

  <tr>
        <td ng-show="id" class="padded">id:</td>
        <td ng-show="id" th:text="${custinfo.id}" class="padded"></td>
  </tr>
  //continue down

lin · Accepted Answer · 2017-04-12 16:09:34Z

7

Just loop thru it:

 <p ng-repeat="(key, value) in controller.greeting.custinfo">{{key}}: {{value}}</p>

edited Apr 12, 2017 at 16:09

answered Apr 12, 2017 at 16:08

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

6 Comments

Mike.Chun Over a year ago

In my case what would be key/value?

lin Over a year ago

On first row: key = "id" & value = "null".

Mike.Chun Over a year ago

Ok, key would work, but not value. Value changes everytime. So I can't just set the value

lin Over a year ago

If your object changes, the key/value (output) will change too. Check E2E binding of AngularJS.

Mike.Chun Over a year ago

Got it, you gave me the answer. Will accept when times up.

|

Spharah · Accepted Answer · 2017-04-12 16:16:52Z

3

To display a list using AngularJS, you need an array that you will iterate.

Let's say you have list of customers

$scope.customers = [{id:1, name:'customer1'}, .....];

You will do so this

 <ul>
<li ng-repeat="custInfo in customers">{{custInfo.name}}       </li>
</ul>

answered Apr 12, 2017 at 16:16

Spharah

6557 silver badges19 bronze badges

Comments

Tymek · Accepted Answer · 2017-04-12 16:25:57Z

2

AngularJS can iterate over object with ng-repeat.

$scope.data = {"id":null,"biling_address":"null","billing_state":"FL","ip_Addresses":["123:111:2101","","NULL"],"name":"jimmmy"};

<table>
  <tr ng-repeat="(key, value) in data">
    <td>{{key}}</td>
    <td class="padded">{{value}}</td>
  </tr>
</table>

Example for your data: https://jsfiddle.net/fn8rqjz2/1/

If you want to show or hide elements based on id:

<tr ng-show="data.id" ng-repeat="(key, value) in data">

answered Apr 12, 2017 at 16:25

Tymek

3,1531 gold badge28 silver badges46 bronze badges

Comments

Nderim · Accepted Answer · 2017-04-12 16:13:09Z

0

Try this:

<p ng-repeat="(key, value) in yourObj">{{yourObj[key]}}</p>

If I understood what are you trying to do.

answered Apr 12, 2017 at 16:13

Nderim

91 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to use foreach with AngularJS on HTML

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related