CODEWITHSUNDEEP
angularjsjson
Nicoleta Wilskon
Nicoleta Wilskon

Reputation: 697

Handling array inside array JSON in table

I have a JSON Response as follows JSON :

var res =   
     {
      "response": {
        "data": {
          "profilesearchsnippet": [
            [
              {
                "profileInfo": {
                  "firstname": "Sundar",
                  "lastname": "v",
                  "gender": "male",
                  "country": "Afghanistan",
                  "state": "Badakhshan",
                  "city": "Eshkashem",
                  "pincode": "",
                  "plancode": "T001",
                  "userid": 13
                },
                "roleInfo": {
                  "defaultphotoid": 94
                }
              }
            ],
            [
              {
                "profileInfo": {
                  "firstname": "ghg",
                  "lastname": "vbhvh",
                  "gender": "male",
                  "state": "Badakhshan",
                  "city": "Eshkashem",
                  "pincode": "454",
                  "plancode": "T001",
                  "userid": 22
                },
                "roleInfo": {
                  "defaultphotoid": 171
                }
              }
            ]
          ]
        }
      }
    }

I want to fetch all firstname , country state city in a table.I tried assigning profilesearchsnippet value to variable var SearchData and try fetching firstname by using profileinfo,since its object. I am missing something somewhere need assistance.

HTML:

 <tr ng-repeat= "item in searchData">
        <td>{{item.profileInfo.firstname}}</td>
        <td> {{item.profileInfo.country}}</td>
      </tr>

JS:

var searchData = res.response.data.profilesearchsnippet[0];

Upvotes: 1

Views: 245

Answers (4)

Sa E Chowdary
Sa E Chowdary

Reputation: 2075

Hope this is your requirement and you dint have country field for GHG so it wont show up in output instead that i added a static msg 

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat= "item in searchData">
        <p>{{item[0].profileInfo.firstname}}</p>
         <p>{{item[0].profileInfo.country ||"no country data available "}}</p>
        
      </div>
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = {
  "response": {
    "data": {
      "profilesearchsnippet": [
        [
          {
            "profileInfo": {
              "firstname": "Sundar",
              "lastname": "v",
              "gender": "male",
              "country": "Afghanistan",
              "state": "Badakhshan",
              "city": "Eshkashem",
              "pincode": "",
              "plancode": "T001",
              "userid": 13
            },
            "roleInfo": {
              "defaultphotoid": 94
            }
          }
        ],
        [
          {
            "profileInfo": {
              "firstname": "ghg",
              "lastname": "vbhvh",
              "gender": "male",
              "state": "Badakhshan",
              "city": "Eshkashem",
              "pincode": "454",
              "plancode": "T001",
              "userid": 22
            },
            "roleInfo": {
              "defaultphotoid": 171
            }
          }
        ]
      ]
    }
  }
};
$scope.searchData = $scope.name.response.data.profilesearchsnippet;

});

</script>
</html>

Upvotes: 1

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

You will get only one using:

var searchData = res.response.data.profilesearchsnippet[0];

Try this:

var searchData = res.response.data.profilesearchsnippet;

and in template:

<tr ng-repeat= "item in searchData">
    <td>{{item[0].profileInfo.firstname}}</td>
    <td> {{item[0].profileInfo.country}}</td>
  </tr>

UPDATED: 

item[0].profileInfo

Hope this will work.

Upvotes: 1

Suresh B
Suresh B

Reputation: 1652

In Js get like this:-

var searchData = res.response.data.profilesearchsnippet[0];;

In Html:- 

 <div ng-repeat= "item in searchData">
 <tr ng-repeat= "itm in item">
        <td>{{itm.profileInfo.firstname}}</td>
        <td> {{itm.profileInfo.country}}</td>
      </tr>
 <div>

Upvotes: 2

Vikash Kumar
Vikash Kumar

Reputation: 1718

<tr ng-repeat= "item in searchData">
    <td>{{item[0].profileInfo.firstname}}</td>
    <td> {{item[0].profileInfo.country}}</td>
  </tr>

The data that you want to access is inside another array with single value so access it with index.

Upvotes: 2

Related Questions