Znowman Znowman - 2 months ago 9
Javascript Question

Angularjs json data

Been looking for clues on how to solve this.

Got a json doc with three objects containing arrays of data. Viewing them like:

<tr data-ng-repeat="x in data.Country
| filter:{Continent:ContinentValue}
| filter:{GovernmentForm:govForm}
| filter:{Name:countName}
| orderBy:orderProperty"
data-ng-if="x.Population >= popValueMax && x.Population <= popValueMin">
<td><a href="#/{{ x.Code }}">{{x.Name }}</td>
<td>{{x.Population}}</td>
<td>{{x.LifeExpectancy}}</td>
<td>{{x.GovernmentForm }}</td>
<td>{{x.HeadOfState }}</td>
</tr>
</table>


Also using them in another view:

<ul >
<li>Local name: {{x.LocalName}}</li>
<li>Continent: {{x.Continent}}</li>
<li>Region: {{x.Region}}</li>
<li>Surface area: {{x.SurfaceArea}}</li>
<li>Population: {{x.Population}}</li>
<li>Gross National Product(GNP): {{x.GNP}}</li>
<li>Government form: {{x.GovernmentForm}}</li>
<li>Head of state: {{x.HeadOfState}}</li>
<li>Capital: {{}}</li>
<li>Official language: {{}}</li>
<li>{{}}</li>



In the second one, capital is a number in object A which is X, but the name of the capital is in object B where the capital number from A is the ID of the city in object B.

Using this to get the data between the html docs:

controllers.controller("details", ["$scope", "$routeParams", "$filter",
function($scope, $routeParams, $filter) {

$scope.x = $filter("filter")($scope.data.Country,
{Code: $routeParams.CodeId})[0];
}]);


Any ideas on how to get the name(string) from object B into
<li>Capital: {{}}</li
?

M B M B
Answer

Assuming that object B looks something like

[{id:1, name:'One'}, {id:2, name:'Two'}]

you can filter the object in you expression and then take the name of the first filtered object.

<li>Capital: {{(objectB|filter:{id: x.Capital})[0].name}}</li>

If there are more properties on objectB that you need to use, you can set the filtered property to a variable and reuse it

<li>Capital: {{(capitalObj = (objectB|filter:{id: x.Capital})[0]).name}}</li>
<li>Other Prop: {{capitalObj.other}}</li>