Nag Nag - 3 months ago 15
JSON Question

How to display name values from nested json structure either using javascript or angularjs?

I wanted to display "

name
" values on my html page from my nested json structure, but I am unable to get exactly, I hope I am missing some syntax of it in my
ng-repeat
. Please let me know what I am doing wrong to display the "
name
" values in my table using javascript or angularjs ? I have created Plnkr. Thanks in advance.

app.js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {

$http.get("test.json").success(function (response) {
$scope.values = response.test;
console.log(JSON.stringify(response.test));//giving my json data
});
});


html:

<table>
<tr>
<th>Name</th>
</tr>
<tr ng-repeat="item in values">
<!--<td>{{ item.name }}</td>-->
<td>{{ item.Testing[0].testval[0].name }}</td>
</tr>
</table>


json:

{
"test": [{
"Testing": {
"testval": {
"name": "first name"
}

}
}, {
"Testing": {
"testval": {
"name": "second name"
}
}
}]

}

Answer

name property can be directly accessing via traversing through the object using .(dot) . You don't need to use [0] since it isn't an array.

<td>{{ item.Testing.testval.name }}</td>

Plunkr