Angularjs nested json object with ng-repeat not working at ionic - angularjs

Question

First of all, I'm pretty new to the ionic and angularjs. Now I trying to develop a app and i'm having trouble displaying and searching data right now.
I have a nested json object and I cannot display it with ng-repeat.
Here is the json object.
$scope.nestedTestdata = [{
"leadlist ": [{
"submitted_date": "01-01-2160",
"submission_value": {
"full_name": "Full Name ",
"phone": "This is test data.",
"source": "I hate you"
}
},
{
"submitted_date": "01-01-2015",
"submission_value": {
"full_name": "full name",
"phone": "phone.",
"source": "I really really hate you"
}
},
{
"submitted_date": "01-01-2016",
"submission_value": {
"full_name": "I am awesome",
"phone": "HP phone.",
"source": "I hate you"
}
}]
}];
Here is how I display.
<div class="lead_row" ng-repeat="data in nestedTestdata.leadlist | filter: model.search" >
<div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div>
<div class="lead_col">{{data.submission_value.source}}</div>
<div class="lead_col">{{data.submission_value.full_name}}</div>
<div class="lead_col">{{data.submission_value.phone}}</div>
</div>
When I change it to following json object, it can display and search function also working.
$scope.testdata = [{
"submitted_date": "01-01-2160",
"submission_value": {
"full_name": "Search is working",
"phone": "This is fucking test data.",
"source": "I hate you"
}
},
{
"submitted_date": "01-01-2015",
"submission_value": {
"full_name": "Fucking full name",
"phone": "Fucking phone.",
"source": "I really really hate you"
}
},
{
"submitted_date": "01-01-2016",
"submission_value": {
"full_name": "I am awesome",
"phone": "Fucking HP phone.",
"source": "I hate you"
}
}];
So I think it is not displaying problem.
Please help to figure out how can i make this work.
Please check inside the following link for the full code.
http://play.ionic.io/app/720567016712
Thank you so much in advance.

Answer 1

nestedTestData contains an array. Inside the array, there is an object.
ng-repeat="data in nestedTestdata[0].leadlist | filter: model.search"
SO code should be as follows:
<div class="lead_row" ng-repeat="data in nestedTestdata[0].leadlist | filter: model.search" >
<div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div>
<div class="lead_col">{{data.submission_value.source}}</div>
<div class="lead_col">{{data.submission_value.full_name}}</div>
<div class="lead_col">{{data.submission_value.phone}}</div>
</div>

Answer 2

So you have an array then you are defining another array with an object with a key of 'leadlist'. The answer above could solve your problem or you could just remove the array above your key you can just access it as normal data.nestedTestData
Below is how you could rewrite it:
`$scope.nestedTestdata = {
"leadlist" : [{
"submitted_date": "01-01-2160",
"submission_value": {
"full_name": "Full Name ",
"phone": "This is test data.",
"source": "I hate you"
}
},
{
"submitted_date": "01-01-2015",
"submission_value": {
"full_name": "full name",
"phone": "phone.",
"source": "I really really hate you"
}
},
{
"submitted_date": "01-01-2016",
"submission_value": {
"full_name": "I am awesome",
"phone": "HP phone.",
"source": "I hate you"
}
}]
};`

Answer 3

You can use nested ng-repeat, It will also work if there are multiple objects in $scope.nestedTestdata.
Here is working fiddle
<div ng-controller="MyCtrl">
<div class="lead_row" ng-repeat="data in nestedTestdata">
<div ng-repeat="list in data.leadlist">
<div class="lead_col">{{list.submitted_date | date : 'dd-MMM-yyyy'}}</div>
<div class="lead_col">{{list.submission_value.source}}</div>
<div class="lead_col">{{list.submission_value.full_name}}</div>
<div class="lead_col">{{list.submission_value.phone}}</div>
</div>
</div>
</div>
please remove the space after "leadlist "