在表中处理Json响应

时间:2016-12-24 09:16:54

标签: angularjs json

我有一个JSON响应如下 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",

              }
            }

          ]
        }
      }
    }

我想在表中获取所有firstname,country state city。我尝试将profilesearchsnippet值分配给变量var SearchData并尝试使用profileinfo从其对象获取firstname。我错过了某些需要帮助的地方。

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;

4 个答案:

答案 0 :(得分:2)

您的JSON格式错误。您的代码中还有一些额外的commas(,)。以下是有效的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"

                    }
                }

            ]
        }
    }
}

不要忘记在profilesearchsnippet

中存储searchData

现在在html中执行此操作。

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

答案 1 :(得分:1)

您应该在item代码中引用searchData而不是td

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

答案 2 :(得分:1)

1。您的JSON无效。

enter image description here

2。ng-repeat内使用{{item.profileInfo.firstname}}代替{{searchData.profileInfo.firstname}}

工作演示:

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>

答案 3 :(得分:0)

首先,你的JS错了......

如果您在控制器中使用范围...然后将值绑定到scope,而不是绑定到fly var ... 如果您使用控制器作为,则将您的数据绑定到this

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

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

,否则

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

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

一旦你纠正了这个......你也错了,迈克说的......你需要将你的数据绑定到项目......正如你所说item里面有一个searchData