angularjs ng-repeat drop down menu from json nested

Question

I have the following example.json file:

[
  {
    "interests": [
      {
        "item": "art"
      },
      {
        "item": "literature"
      },
      {
        "item": "history"
      },
      {
        "item": "science"
      }
    ]
  },
  {
    "experience": [
      {
        "year": "novice"
      },
      {
        "year": "experienced"
      }
    ]
  }
]

and in my view controller, I read the file like this:

app.controller('ProfileCtrl', ["$scope", "$state", "$http",
    function ($scope, $state, $http) {

    $http.get('files/example.json').success(function (data)
        {
            $scope.myjsonobj= data;
        });

and in my html view, I am injecting the values like this:

<div ng-controller="ProfileCtrl">
...
    <select class="form-control" ng-model="user.favs">
       <option ng-repeat="p in interests.myjsonobj" value="{{p.item}}">{{p.item}}</option>
    </select>

question:

How can I show only the list of values of "interests" in my dropdown menu? How can I access the nested json array in angularjs?
my current setup is not working.

You can set $scope.myjsonobj to data.interests instead of to the entire JSON reply — Thomas W.
– Thomas W., Commented Oct 17, 2016 at 21:18

Benny Lin · Accepted Answer · 2016-10-17 21:36:10Z

1

assuming 'interests' is your controller shortname.

you can use:

<option ng-repeat="p in myjsonobj[0].interests" value="{{p.item}}">{{p.item}}</option>

Ideally, you should loop the data object to find the index with the 'interests' key vs hardcoding [0].

update: removed "interests." from the repeat. doesn't seem like you have the ctrl shortname binding.

edited Oct 17, 2016 at 21:36

answered Oct 17, 2016 at 21:20

Benny Lin

5363 silver badges8 bronze badges

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

6 Comments

cplus Over a year ago

what do you mean by controller shortname? I updated my controller name in my question, trying to avoid name confusions.

Benny Lin Over a year ago

ng-controller="YourControllerName as interests" this binds methods and properties of your controller to "interests". with that in the html, you access scope variable via interests.scopeVariable.

Benny Lin Over a year ago

if you don't have setup, then just change it to this: <option ng-repeat="p in myjsonobj[0]" value="{{p.item}}">{{p.item}}</option>

cplus Over a year ago

could you please look at my updated question and provide an adapted answer please. I am confused now with different terminologies.

Benny Lin Over a year ago

can you show me the html element where you have the ng-controller binded? e.g. <div ng-controller="ProfileCtrl...">

|

jay · Accepted Answer · 2016-10-17 21:19:06Z

0

I'm not an angular guy. But with my javascript knowledge it seems to me that the

"interests.myjsonobj"

should be

"myjsonobj.interests"

answered Oct 17, 2016 at 21:19

jay

1,8002 gold badges13 silver badges16 bronze badges

Collectives™ on Stack Overflow

angularjs ng-repeat drop down menu from json nested

question:

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

question:

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related