Angular looping a array of JSONs

Question

I currently have an array of JSONs that I am trying to print out to the screen by using a loop. Currently I can get my results I want without the loop but when I try to convert it to a loop I run into some issues. Any insight would be helpful. Thank you.

This is my current code:

<div>
    <h2>Document Type</h2>
    <select>
        <option>Document Type : {{handoff[0].documentType}}</option>
        <option>Document Type : {{handoff[1].documentType}}</option>
        <option>Document Type : {{handoff[2].documentType}}</option>
        <option>Document Type : {{handoff[3].documentType}}</option>
        <option>Document Type : {{handoff[4].documentType}}</option>
    </select>
    <select>
        <option ng-repeat="temp in handoff">Document Type : {{temp[0].documentType}}</option>
    </select>
    <select>
        <option ng-repeat="temp in handoff">Document Type : {{temp.documentType}}</option>
    </select>
</div>

My results for the first "select" are correct but for the second and third have no results.

Here is what the obj looks like:

"handoffs":{"0":{   "documentType":"0","conlID":"1230","userName":"CU0","handoff":"h=81878E9E772BCA176D868CA633BFB47D38274B1B209FD80856E56B47"
},"1":{"documentType":"1","conlID":"C010","userName":"A010","handoff":"ERROR: A temporary problem was encountered.  Please try your request again in a few minutes."},"3":{"documentType":"3","conlID":"C010","userName":"C10","handoff":"HANDOFF=81878E9E77FB56E56B47"}}

Can you post the controller code or at least what the handoff array looks like? and also can you clarify which part of your above code works and which doesn't? — o4ohel
– o4ohel, Commented Sep 25, 2015 at 18:12
all the options are missing with value attribute .. 3rd should work as its correct..Though I'd suggest you to go for using ng-options — Pankaj Parkar
– Pankaj Parkar, Commented Sep 25, 2015 at 18:14
@o4ohel : the controller code will not help at all as it's an API response. The first SELECT works but the other 2 do not. And I just updated the question to display the handoff structure. — Sari Rahal
– Sari Rahal, Commented Sep 25, 2015 at 18:32
@PankajParkar : Up voted b/c of the ng-options to clean up my code, but it still doesn't work. — Sari Rahal
– Sari Rahal, Commented Sep 25, 2015 at 18:38
@SariRahal could you add you sample json response..instead of image? — Pankaj Parkar
– Pankaj Parkar, Commented Sep 25, 2015 at 18:50

Pankaj Parkar · Accepted Answer · 2015-09-25 20:21:31Z

1

You should correct you json structure & shouldn't have "0", "1" & "2" in object literals in your response, You could simply have an array so that your problem would get solved.

Updated JSON

{
    "handoffs": [{
            "documentType": "0",
            "conlID": "1230",
            "userName": "CU0",
            "handoff": "h=81878E9E772BCA176D868CA633BFB47D38274B1B209FD80856E56B47"
        },{
            "documentType": "1",
            "conlID": "C010",
            "userName": "A010",
            "handoff": "ERROR: A temporary problem was encountered.  Please try your request again in a few minutes."
        },{
            "documentType": "3",
            "conlID": "C010",
            "userName": "C10",
            "handoff": "HANDOFF=81878E9E77FB56E56B47"
        }]
    }
}

Update

@o4ohel suggested a good option, if you don't have any control over the data & don't wanted to change it. Then you should use the option

<select>
    <option ng-repeat="(key, value) in handoff">Document Type : {{value.documentType}}</option>
</select>

edited Sep 25, 2015 at 20:21

answered Sep 25, 2015 at 19:13

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

o4ohel Over a year ago

That's a good answer. But If you don't want to preprocess the object into an array, you could use the following syntax: <option ng-repeat="(key, temp) in handoffs">Document Type : {{temp.documentType}}</option>

o4ohel Over a year ago

For the record, I agree with @pankaj-parkar that it's better/makes more sense to have 'handoffs' be an array.

Collectives™ on Stack Overflow

Angular looping a array of JSONs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related