Need to do refresh for displaying array that coming in json data and displaying through ng-repeat

Question

I am receiving a response from backend and saving in "allinfo" varable in my controller. Response data receiving is: name of person, DOB of person and Hobby of person. Hobby of person is array which is can be in n nos.

In my view i had apply ng repeat ovr all info as info in allinfo and for repeating hobby as hobs in info.hobby.

Problem I am facing is while I repeat the info in allinfo in my view, it display name and Dob but for hooby I need to do refreshand then it display hobby.

I had console the response and found that Hobby object is received in allinfo but thing is it is receiving empty array and after one refresh it refresh the all element of array.

Help me out in this. Thank you in advance

Answer 1

Try this it will work as per your expectation.

In below code i assume that responseData having the same format of the data as you are getting from the server.

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

function MyCtrl($scope) {
    $scope.responseData = [
             {
             "name" : "Alpha",
             "dob" : "04-11-1991",
             "hobby" : [["singing"],["writing"]]
             },
             {
             "name" : "Beta",
             "dob" : "04-11-1990",
             "hobby" : [["playing"],["making friends"]]
             }
    ];
    
    var hobbiesData = [];
    for (var i in $scope.responseData) {
      hobbiesData = [];
      for (var j in $scope.responseData[i].hobby) {
        for(var k in $scope.responseData[i].hobby[j])
        hobbiesData.push($scope.responseData[i].hobby[j][k]);
      }
          var hobbies = hobbiesData.join();
          $scope.responseData[i].hobby = hobbies;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="data in responseData">
         Name : {{data.name}}<br>
         Date of Birth : {{data.dob}}<br>
         Hobbies : {{data.hobby}}
  </div>
</div>