Handling array inside array JSON in table

Question

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];

Have you assigned searchData to something like controller or scope ? — Flying Gambit
– Flying Gambit, Commented Dec 26, 2016 at 5:55
searchData is not the iterable you are looking for, you defined it as var searchData = res.response.data.profilesearchsnippet[0]; this is just one of the search results. Try without the [0]. — Sergio Prada
– Sergio Prada, Commented Dec 26, 2016 at 5:57

Suresh B · Accepted Answer · 2016-12-26 05:56:55Z

2

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>

answered Dec 26, 2016 at 5:56

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

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

Comments

Vikash Kumar · Accepted Answer · 2016-12-26 05:55:23Z

2

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

answered Dec 26, 2016 at 5:55

Vikash Kumar

1,7161 gold badge12 silver badges17 bronze badges

Comments

Avnesh Shakya · Accepted Answer · 2016-12-26 06:00:28Z

1

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.

edited Dec 26, 2016 at 6:00

answered Dec 26, 2016 at 5:58

Avnesh Shakya

3,9162 gold badges25 silver badges32 bronze badges

Comments

Sa E Chowdary · Accepted Answer · 2016-12-26 06:11:38Z

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>

Collectives™ on Stack Overflow

Handling array inside array JSON in table

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related