Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Question

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Upon receiving a response from the backend, I am saving it in a variable called "allinfo" in my controller. The data received includes the name, date of birth, and hobby of a person. The hobby is an array that can contain any number of elements.

In my view, I applied an ng-repeat over all the info stored in "allinfo" and for repeating hobbies, I used another ng-repeat to iterate over each hobby in the "info.hobby" array.

The issue I'm encountering is that when I repeat the info in "allinfo" in my view, it displays the name and DOB correctly but doesn't show the hobbies until I refresh the page.

After looking at the console log, I realized that the Hobby object is indeed received in "allinfo," but initially as an empty array. Only after refreshing does the array populate with all the necessary elements.

If anyone has encountered this issue before and knows how to solve it, please help me out. Thank you in advance!

javascript angularjs arrays json angularjs-ng-repeat

Answer 1

Answer №1

Give this a try, it should meet your expectations.

In the code below, I am assuming that the responseData variable contains data in the same format as it is received 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>

Answer 2

Give this a try, it should meet your expectations.

In the code below, I am assuming that the responseData variable contains data in the same format as it is received 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>

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Answer №1

Similar questions

Difficulty in using window.scrollTo within useEffect in reactJS

Accessing various sections and properties of a JSON file using C# parsing

HTML: Organize a slightly intricate column in a table

Issues with jQuery Ajax sending Post data to PHP script

Exploring the concept of array inheritance in Java

Exploring the possibilities of integrating the iTunes Store customer reviews API

Decoding JSON with JavaScript following the response from JsonConvert.SerializeObject(json) in a .NET handler

Scene three js appears to be stuck in a perpetual state of emptiness, making it challenging to start

Tips for Passing Parameters to Vuex mapActions correctly:Executing mapActions in Vuex requires a specific

Why is it that $_GET consistently returns null despite successfully transmitting data via AJAX?

Is it possible to open a PDF file in a new tab using Angular 4?

Prevent the upward arrow from appearing on the first row and the downward arrow from appearing on the last row when

Webpack is throwing an error stating that it cannot find a module with the relative path specified

Conceal a section of a container with the click of a button within a WordPress Plugin

How can I execute a synchronous MongoDB query in Node.js properly?

Is utilizing the correct use case for a Bunyan child logger?

Utilize gson to parse JSON containing a variety of child objects, then return it as a list

Error encountered while attempting to convert a unique custom object to JSON in Jersey

Randomly retrieving Vue data from a JSON source

Ajax is able to fetch a JSON string, however it struggles to iterate through the successful data as an