Обработка ответа Json в таблице

Question

У меня есть 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, состояние страны города в table.I судимого присваивая значение profilesearchsnippet к переменной var SearchData и попробуйте запросить firstname, используя profileinfo, с его объекта. Мне не хватает чего-то, что-то нуждается в помощи.

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; 

Answer 1

1. Ваш JSON является недействительно.

2. Внутри ng-repeat использование {{item.profileInfo.firstname}} вместо {{searchData.profileInfo.firstname}}.

Работа демо:

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

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

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

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

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

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

 
\t \t \t ] 
 
\t \t } 
 
\t } 
 
}; 
 

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

Answer 2

Вы должны быть ссылки item не searchData в ваших td тегов.

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

Answer 3

Ваш формат 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> 

Answer 4

Во-первых, ваш JS не так ...

Если вы используете сферу внутри контроллера ... затем связать значение scope, а не на лету вар ... и если использовать контроллер как, затем связать свои данные 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