Unable to make looping on JsonData AngularJS

Question

My Code is like this

<div ng-app='myApp' ng-controller="MainCtrl">
 <div ng-repeat="destData in AddressData">
                <div ng-repeat="destData in data">
                    <h4>Destination: </h4>
                    <span>Name: </span>  {{destData.STNAME}}<br />
                    <span>streat: </span> {{destData.STADD1}}<br />
                    <span>city: </span> {{destData.STCITY}}<br />
                    <span>State: </span>  {{destData.STSTAT}}<br />
                    <span>Zip: </span> {{destData.STZIPC}}<br />
                    <span>Country: </span> {{destData.USA}}<br />
                    <span> pick up date: </span>{{destData.PICKDT}}<br />
                </div>
        </div>
 </div>


    angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', '$filter', function ($http, $scope, $filter) {
 $scope.AddressData=[
    {
        "fromData": [
            {
                "STNAME": "NEW",
                "STADD1": "217",
                "STCITY": "GA",
                "STSTAT": "SC",
                "STZIPC": "293",
                "STCNTY": "USA",
                "PICKDT": "09/04/2014"
            }
        ],
        "destData": [
            {
                "STNAME": "NEW",
                "STADD1": "217",
                "STCITY": "GAFFNEY",
                "STSTAT": "SC",
                "STZIPC": "293",
                "STCNTY": "USA",
                "PICKDT": "09/04/2014"
            }
        ]
    }
]
});

everything looks okay to me. but angular is not displaying data. Can anyone point out what I am doing wrong?

<div ng-repeat="destData in data"> looks wrong, doesn't it? Should be <div ng-repeat="data in destData"> or something, no? — Oskar Lindberg
– Oskar Lindberg, Commented Oct 15, 2014 at 7:30
do you noticed any JavaScript error in browser console? If yes post the error too. — Nishad K Ahamed
– Nishad K Ahamed, Commented Oct 15, 2014 at 7:31

Oskar Lindberg · Accepted Answer · 2014-10-15 09:37:40Z

Your data structure (AddressData) is weird, but maybe you can't change it (if you can, you should, and I can explain exactly how as soon as it's clear what you want).

You need to do the following to get the code working given the current data structure:

<div data-ng-repeat="data in AddressData">
    <h4>Destination: </h4>
    <span>Name: </span>  {{data.destData[0].STNAME}}<br />
    <span>streat: </span> {{data.destData[0].STADD1}}<br />
    <span>city: </span> {{data.destData[0].STCITY}}<br />
    <span>State: </span>  {{data.destData[0].STSTAT}}<br />
    <span>Zip: </span> {{data.destData[0].STZIPC}}<br />
    <span>Country: </span> {{data.destData[0].USA}}<br />
    <span>pick up date: </span>{{data.destData[0].PICKDT}}<br />
</div>

That is, get rid of one iterator, and fetch the data from the first index of the array in which you store the anonymous object containing the actual values. (The latter part is also one of the things that is odd about your data structure, as the array does not seem to serve any purpose in your example.)

Stepping things up, I hazard this following is something closer to what you really want, assuming you can control the layout of the data as well - now you get both source and destination data with just one loop:

<div data-ng-controller="MainCtrl">
    <div data-ng-repeat="data in AddressData">
        <h4>From: </h4>
        <span>Name: </span>  {{data.fromData.STNAME}}<br />
        <span>streat: </span> {{data.fromData.STADD1}}<br />
        <span>city: </span> {{data.fromData.STCITY}}<br />
        <span>State: </span>  {{data.fromData.STSTAT}}<br />
        <span>Zip: </span> {{data.fromData.STZIPC}}<br />
        <span>Country: </span> {{data.fromData.USA}}<br />
        <span>Pick up date: </span>{{data.fromData.PICKDT}}<br />

        <h4>Destination: </h4>
        <span>Name: </span>  {{data.destData.STNAME}}<br />
        <span>streat: </span> {{data.destData.STADD1}}<br />
        <span>city: </span> {{data.destData.STCITY}}<br />
        <span>State: </span>  {{data.destData.STSTAT}}<br />
        <span>Zip: </span> {{data.destData.STZIPC}}<br />
        <span>Country: </span> {{data.destData.USA}}<br />
        <span>Pick up date: </span>{{data.destData.PICKDT}}<br />
    </div>
</div>

<script>
    function MainCtrl($scope) {
        $scope.AddressData = [
            {
                "fromData":
                    {
                        "STNAME": "NEW",
                        "STADD1": "217",
                        "STCITY": "GA",
                        "STSTAT": "SC",
                        "STZIPC": "293",
                        "STCNTY": "USA",
                        "PICKDT": "09/04/2014"
                    }
                ,
                "destData":
                    {
                        "STNAME": "NEW",
                        "STADD1": "217",
                        "STCITY": "GAFFNEY",
                        "STSTAT": "SC",
                        "STZIPC": "293",
                        "STCNTY": "USA",
                        "PICKDT": "09/04/2014"
                    }

            }
        ];
    }
</script>

(Of course, if you only ever have just one set of source and destination data, you don't need any iteration at all.)

Edit: Changed the first example to reflect changes the OP made to the code in the original question.

(Also, I see now from comments given in response to other suggested solutions that the OP is only really interested in the values of destData. However, I leave the second block of code untouched, with data being fetched from fromData as well, as I think this part may still serve to further illustrate how to access the data.)

Ben Heymink · Accepted Answer · 2014-10-15 07:32:03Z

1

It's because your Address data is an array of one object, with two properties, each of which is a single element array. Also your inner ng-repeat is not refferring to the parent element correctly, it should be iterating over destData, not 'data':

 <div ng-repeat="destData in AddressData">
                <div ng-repeat="obj in destData">

Here is an updated fiddle that works, but works on the assumption that there will only ever be one element in that inner-most array.

answered Oct 15, 2014 at 7:32

Ben Heymink

1,70012 silver badges26 bronze badges

2 Comments

None Over a year ago

There is two kind of objects in the data, and I want to loop through only destData not fromData . How could I achieve it?

Ben Heymink Over a year ago

If you are only interested in destData and not formData, then you don't need the inner ng-repeat, simply reference destData.destData and that's the collection you want :)

Yasser Shaikh · Accepted Answer · 2014-10-15 07:50:00Z

Try this

<body ng-controller="MainCtrl">
    <div ng-repeat="item in AddressData">
        <div ng-repeat="d in item.destData">
            <h4>Destination: </h4>
            <span>Name: </span> {{d.STNAME}}
            <br />
            <span>streat: </span> {{d.STADD1}}
            <br />
            <span>city: </span> {{d.STCITY}}
            <br />
            <span>State: </span> {{d.STSTAT}}
            <br />
            <span>Zip: </span> {{d.STZIPC}}
            <br />
            <span>Country: </span> {{d.USA}}
            <br />
            <span> pick up date: </span>{{d.PICKDT}}
            <br />
        </div>
    </div>
</body>

Here a working plunker for you - http://plnkr.co/edit/G9TVmQ8YVgRNC7DAcZuB?p=preview

akhil_jose · Accepted Answer · 2014-10-15 07:50:50Z

If you just need to access, 'destData' then there is no need to loop through the array. Also you does not need to declare two properties within an array. You could modify it to:

$scope.AddressData={
    "fromData": [
        {  
            "STNAME": "NEW",
            "STADD1": "217",
            "STCITY": "GA",
            "STSTAT": "SC",
            "STZIPC": "293",
            "STCNTY": "USA",
            "PICKDT": "09/04/2014"
        }
      ],        
      "destData": [
        {
            "STNAME": "NEW",
            "STADD1": "217",
            "STCITY": "GAFFNEY",
            "STSTAT": "SC",`
            "STZIPC": "293",
            "STCNTY": "USA",
            "PICKDT": "09/04/2014"
        }
      ]
};

So that the required address can be accessed as

            <div ng-repeat="data in AddressData.destData">
                <h4>Destination: </h4>
                <span>Name: </span>  {{data.STNAME}}<br />
                <span>streat: </span> {{data.STADD1}}<br />
                <span>city: </span> {{data.STCITY}}<br />
                <span>State: </span>  {{data.STSTAT}}<br />
                <span>Zip: </span> {{data.STZIPC}}<br />
                <span>Country: </span> {{data.USA}}<br />
                <span> pick up date: </span>{{data.PICKDT}}<br />
            </div>

Collectives™ on Stack Overflow

Unable to make looping on JsonData AngularJS

4 Answers 4

Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Related