CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
jazzkookie
jazzkookie

Reputation: 110

Accessing json data with angular js

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..

Upvotes: 1

Views: 988

Answers (1)

Jason Goemaat
Jason Goemaat

Reputation: 29214

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>

Upvotes: 1

Related Questions