Accessing json data with angular js

Question

I have a couple of questions for accessing model data in my html page using angular. I'm new to angular and have been trying different things but have not been successful so far.
I've set up a contrived example in plunker to illustrate my use case.
My js file looks likes this:

 angular.module("myApp", ['ui.bootstrap']);
function AccordionDemoCtrl($scope) {
jsonData = {
    "myLocation": "montreal",
    "locations" : [
        "montreal",
        "new york"
    ],
    "carDealers": [
        {
            "model" : "bmw",
            "location": "montreal"
        },
        {
            "model" : "honda",
            "location": "new york"
        }
    ]
};
$scope.pageData = {
    data: jsonData,
    detailContentModel: 'bmw'
}
}

jsonData is the data i obtain from the server. I had trouble putting my formatted HTML code here, so i've linked to my working plunker example below.

I have 2 issues i'm trying to solve:
In my html page i'd like to display car details i.e. model and location in a div based on a user's car selection from an accordion like menu.
The detail div has two elements where
1) i'd like to display the current location of the car and
2) then a dropdown which displays all other locations except for the location associated with the selected car.
e.g.
In my example if a BMW was selected, then the detail div should display the following:
Car Location: montreal
Change location to: [This dropdown should display all locations except montreal]

I'm not entirely sure how to do this. It almost feels like i need to use a xpath type expression to access specific data elements from my model data.
Link to my plunker example.

Note: I'll try to update this question with a few code samples of what i tried - unsuccessfully, once i get a hang of the code formatting here.

Please ignore the formatting of the page. Still new to this stuff..

So the questions is... mmmm... no, I didn't get it. What is your question? — Dalorzo
– Dalorzo, Commented May 25, 2014 at 4:36

Jason Goemaat · Accepted Answer · 2014-05-25 05:46:08Z

1

I think you set up the plnkr quick so I'm assuming you wouldn't really write out all your html for every model and use ng-switch and that was just for speed's sake or else I don't know why you wouldn't hard-code the location too, so when you click on a dealer in my plnkr it sets pageData.selectedDealer and uses it's details (plnkr)

For displaying the location I don't see your problem. Just put the value in braces like you do for the model:

Location: {{pageData.selectedDealer.location}}

To prevent the current location from showing up in your list you could use a filter to remove it:

var app = angular.module("myApp", ['ui.bootstrap']);

app.filter('exclude', function() {
  return function(input, excludeValue) {
    var result = [];
    for (var i = 0; i < input.length; i++) {
      if (input[i] != excludeValue) {
        result.push(input[i]);
      }
    }
    return result;
  }
});

Then use the pipe character | with the filter name, a colon and the arguments to the filter:

<select
    ng-options="location for location in pageData.data.locations | exclude:pageData.selectedDealer.location"
    ng-model="newLocation" ></select>

answered May 25, 2014 at 5:46

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

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

1 Comment

jazzkookie Over a year ago

Thanks for spending the time to look into my example. I had to think of another example to illustrate my use case, and maybe my example (with all the HTML) wasn't the best. Your example helped me better understand assigning the selected dealer and how to use it. Also, regarding the filter, i assumed there was a way to accomplish it inline without the need for a function. But i guess not, thanks for looking into it!

Collectives™ on Stack Overflow

Accessing json data with angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related