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?

Answer 1

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.)

Answer 2

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>

Answer 3

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

Answer 4

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.