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

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.

Simerjit Parmar · Accepted Answer · 2016-09-29 09:31:14Z

2

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>

answered Sep 29, 2016 at 9:31

Simerjit Parmar

8181 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mg Thar Over a year ago

You just save my day. I totally overlook it.Thank you so much. I will accept the answer as soon as I can.

Jackthomson · Accepted Answer · 2016-09-29 09:37:36Z

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"
    }  
}]

};`

Devidas Kadam · Accepted Answer · 2016-09-29 10:11:02Z

1

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 "

answered Sep 29, 2016 at 10:11

Devidas Kadam

9549 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related