YoYo YoYo - 2 months ago 9
JSON Question

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

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

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>