CODEWITHSUNDEEP
angularjsjson
Nicoleta Wilskon
Nicoleta Wilskon

Reputation: 697

Handling Json response in table

I have a JSON Response as follows JSON :

 var res =    {
      "response": {
        "status": {
          "code": "0",
          "message": "Success"
        },
        "service": {
          "servicetype": "3",
          "functiontype": "3000",
          "session_id": "966"
        },
        "data": {
          "profilesearchsnippet": [
            {
              "profileInfo": {
                "firstname": "Archita",
                "lastname": "v",
                "gender": "female",
                "country": "India",

              }
            },

            {
              "profileInfo": {
                "firstname": "Archita",
                "lastname": "V",
                "gender": "female",
                "country": "India",

              }
            },

            {
              "profileInfo": {
                "firstname": "Jayasree",
                "lastname": "Salavadi",
                "gender": "female",
                "country": "Afghanistan",

              }
            },

            {
              "profileInfo": {
                "firstname": "Kalai",
                "lastname": "Sundar",
                "gender": "female",
                "country": "India",

              }
            },

            {
              "profileInfo": {
                "firstname": "Singer",
                "lastname": "sing",
                "gender": "female",
                "country": "Afghanistan",

              }
            }

          ]
        }
      }
    }

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>{{searchData.profileInfo.firstname}}</td>
        <td> {{searchData.profileInfo.country}}</td>
      </tr>

JS: 

var searchData = res.response.data.profilesearchsnippet;

Upvotes: 0

Views: 69

Answers (4)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

1. Your JSON is not valid.

enter image description here

2. Inside ng-repeat use {{item.profileInfo.firstname}} instead of {{searchData.profileInfo.firstname}}.

Working demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function ($scope) {
    var res = {
	"response": {
		"status": {
			"code": "0",
			"message": "Success"
		},
		"service": {
			"servicetype": "3",
			"functiontype": "3000",
			"session_id": "966"
		},
		"data": {
			"profilesearchsnippet": [{
					"profileInfo": {
						"firstname": "Archita",
						"lastname": "v",
						"gender": "female",
						"country": "India"
					}
				},

				{
					"profileInfo": {
						"firstname": "Archita",
						"lastname": "V",
						"gender": "female",
						"country": "India"
					}
				},

				{
					"profileInfo": {
						"firstname": "Jayasree",
						"lastname": "Salavadi",
						"gender": "female",
						"country": "Afghanistan"
					}
				},

				{
					"profileInfo": {
						"firstname": "Kalai",
						"lastname": "Sundar",
						"gender": "female",
						"country": "India"
					}
				},

				{
					"profileInfo": {
						"firstname": "Singer",
						"lastname": "sing",
						"gender": "female",
						"country": "Afghanistan"
					}
				}

			]
		}
	}
};

$scope.searchData = res.response.data.profilesearchsnippet;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
  <tr ng-repeat= "item in searchData">
        <td>{{item.profileInfo.firstname}}</td>
        <td> {{item.profileInfo.country}}</td>
      </tr>
  </table>
</div>

Upvotes: 1

Hassan Faghihi
Hassan Faghihi

Reputation: 2021

First, your JS is wrong...

If you are using scope inside your controller... then bind the value to scope, not to on a fly var... and if you use controller as, then bind your data to this

this.searchData = res.response.data.profilesearchsnippet;

<.... ng-controller="myController as ctrl">
{{ctrl.searchData }}
</...>

otherwise

$scope.searchData = res.response.data.profilesearchsnippet;

<.... ng-controller="myController">
{{searchData }}
</...>

Once you correct this... You also wrong where the Mike said... you need to bind your data to item... as you say there is an item inside searchData

Upvotes: 0

Ram_T
Ram_T

Reputation: 8484

Your JSON format is wrong. There are some extra commas(,) in your code. Below is the valid JSON.

var res = {
    "response": {
        "status": {
            "code": "0",
            "message": "Success"
        },
        "service": {
            "servicetype": "3",
            "functiontype": "3000",
            "session_id": "966"
        },
        "data": {
            "profilesearchsnippet": [{
                    "profileInfo": {
                        "firstname": "Archita",
                        "lastname": "v",
                        "gender": "female",
                        "country": "India"

                    }
                },

                {
                    "profileInfo": {
                        "firstname": "Archita",
                        "lastname": "V",
                        "gender": "female",
                        "country": "India"

                    }
                },

                {
                    "profileInfo": {
                        "firstname": "Jayasree",
                        "lastname": "Salavadi",
                        "gender": "female",
                        "country": "Afghanistan"

                    }
                },

                {
                    "profileInfo": {
                        "firstname": "Kalai",
                        "lastname": "Sundar",
                        "gender": "female",
                        "country": "India"

                    }
                },

                {
                    "profileInfo": {
                        "firstname": "Singer",
                        "lastname": "sing",
                        "gender": "female",
                        "country": "Afghanistan"

                    }
                }

            ]
        }
    }
}

Do not forget to store profilesearchsnippet in searchData

Now in html do this.

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

Upvotes: 2

Mike
Mike

Reputation: 3940

You should be referencing item not searchData in your td tags.

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

Upvotes: 1

Related Questions