Using dot notation in Angular on JSON object not working as expected

Question

I am being passed a JSON object via an API service. I have NO CONTROL over the format of the JSON. It is however a valid JSON object:

{
    "Template" : {
        "Parameters" : {
            "Name" : "Test",
            "Version" : "1.0"
        },
        "Fields" : {
            "Field" : [{
                    "Prompt" : "Last Name:"
                }, {
                    "Prompt" : "First Name:"
                }, {
                    "Prompt" : "Middle Name"
                }, {
                    "Prompt" : "ID Number:"
                }
            ]
        },
        "Captures" : {
            "Capture" : [{
                    "Prompt" : "Picture"
                }, {
                    "Prompt" : "Picture from file"
                }, {
                    "Prompt" : "Signature"
                }
            ]
        }
    }
}

What I need to do is loop through a list of the Fields in the object, so that I can display values from there. In the case of this example, I am trying to print a list of Prompt values from the Fields.

http://jsfiddle.net/toddhd/0wbfpxkj/9/

  <div ng-repeat="item in template.Fields.Field">
    {{item.Prompt}}
  </div>

This is explained MUCH better by looking at the JSFiddle above.

What I WANT to do is simply get the list of fields using dot/point notation, such as:

template.Fields.Field

But that isn't working for me. In the example, I also made a series of ng-repeats which loop through each collection one by one. That works and produces the desired result, but it's verbose and ugly.

I'm sure I'm just misunderstanding the structure of the JSON object itself, or maybe the correct dot/point notation to get there. But I just can't seem to figure it out. Can you please take a look and tell me where I'm going wrong?

Thank you

Well.. your data structure isn't an array - it's an object, with many fields. You iterate an object via ng-repeat="(k, v) in obj" - a fiddle with the correct repeat syntax: jsfiddle.net/0wbfpxkj/11 — tymeJV
– tymeJV, Commented May 16, 2016 at 20:41
Please avoid using external resources as the details of your question. Edit and include the relevant information. — Amit
– Amit, Commented May 16, 2016 at 20:43

John Smith · Accepted Answer · 2016-05-16 20:54:14Z

5

It's just missing another Template. It should be template.Template.Fields.Field.

Your html should look like this:

<div ng-repeat="item in template.Template.Fields.Field">{{item.Prompt}}</div>

edited May 16, 2016 at 20:54

answered May 16, 2016 at 20:43

John Smith

2,3414 gold badges23 silver badges35 bronze badges

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

5 Comments

Nasreddine Over a year ago

Not sure why this was downvoted because IT IS the correct solution. You consider adding this <div ng-repeat="item in template.Template.Fields.Field">{{item.Prompt}}</div> to complete your answer though.

tymeJV Over a year ago

@Nasreddine -- It's downvoted because OP asked how to iterate the object dynamically and then display the arrays - all this does is show how to iterate the array if you drill down.

John Smith Over a year ago

@tymeJV I don't want to nitpick here, but imo the real question was: What I WANT to do is simply get the list of fields using dot/point notation.

Nasreddine Over a year ago

@tymeJV Maybe I'm misunderstanding since English is not my first language but IMHO this seems to be what the OP was looking for as he wants to replace the 3 ng-repeat blocks with just one in which he uses the "dot notation".

Todd Davis Over a year ago

This IS the answer I was looking for. Could have sworn I started out with this, but I guess I blew it somewhere else and maybe fixed it along the way. Anyway, yes, this is absolutely what I was looking for, and it worked.

Collectives™ on Stack Overflow

Using dot notation in Angular on JSON object not working as expected

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related