How can I use JavaScript to convert a JSON object into an array for iteration with ng-repeat?

Question

How can I use JavaScript to convert a JSON object into an array for iteration with ng-repeat?

Upon retrieving my JSON object from Firebase, I am faced with the challenge of converting a list into an array for binding in HTML using ng-repeat.

The structure of my JSON object is as follows:


{
  "cats1": {
    "Name": "cricket",
    "imgUrl": "some url",
    "list1": {
      "bat": {
        "Name": "bat",
        "imgUrl": "some url",
        "price": "$100"
      },
      "pads": {
        "displayName": "pads",
        "imgUrl": "some url",
        "price": "$50"
      }
    }
  },
  "cats2": {
    "Name": "football",
    "imgUrl": "some url"
  }
}

This is the desired array structure:

I need the data structured in this way to ensure that when adding new items, they are uniquely stored under the cricket category.

[
  {
    "Name": "cricket",
    "imgUrl": "some url",
    "list1": [
      {
        "Name": "bat",
        "imgUrl": "some url",
        "price": "$100"
      },
      {
        "displayName": "pads",
        "imgUrl": "some url",
        "price": "$50"
      }
    ]
  },
  {
    "Name": "football",
    "imgUrl": "some url"
  }
]

I am relatively new to Angular and would appreciate any assistance in resolving this issue.

javascript angularjs arrays json

Answer 1

Answer №1

Utilize the Object.keys method and pass it to Array.prototype.map in order to generate the desired array - check out the demonstration below:

var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

var result = Object.keys(object).map(e=>object[e]);

console.log(result);

.as-console-wrapper{top:0;max-height:100%!important;}

EDIT:

Updated solution to convert list1 into an array:

var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

var result = Object.keys(object).map(function(e){
  Object.keys(object[e]).forEach(function(k){
     if(typeof object[e][k] == "object") {
       object[e][k] = Object.keys(object[e][k]).map(function(l){
         return object[e][k][l];
       });
     }
  });
  return object[e];
});

console.log(result);

.as-console-wrapper{top:0;max-height:100%!important;}

Answer 2

Utilize the Object.keys method and pass it to Array.prototype.map in order to generate the desired array - check out the demonstration below:

var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

var result = Object.keys(object).map(e=>object[e]);

console.log(result);

.as-console-wrapper{top:0;max-height:100%!important;}

EDIT:

Updated solution to convert list1 into an array:

var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

var result = Object.keys(object).map(function(e){
  Object.keys(object[e]).forEach(function(k){
     if(typeof object[e][k] == "object") {
       object[e][k] = Object.keys(object[e][k]).map(function(l){
         return object[e][k][l];
       });
     }
  });
  return object[e];
});

console.log(result);

.as-console-wrapper{top:0;max-height:100%!important;}

Answer 3

Answer №2

Recursion can be used, but be cautious as it may cause freezing for large objects and potentially result in a Maximum Call Stack exceeded error.

Logic

Iterate over the object and check if all entries are themselves objects.
If they are, a simple
```
Object.keys(obj).map(x=>obj[x])
```
will suffice.
If not, you will need to copy individual values, and if an entry is an object, iterate through it recursively. One way is to loop through each key and return the value if it is not an object.

function ObjectToArray(obj) {
  if (typeof(obj) === 'object') {
    var keys = Object.keys(obj);
    var allObjects = keys.every(x => typeof(obj[x]) === 'object');
    if (allObjects) {
      return keys.map(x => ObjectToArray(obj[x]));
    } else {
      var o = {};
      keys.forEach(x => {
        o[x] = ObjectToArray(obj[x])
      });
      return o;
    }
  } else {
    return obj;
  }
}

var d={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

console.log(ObjectToArray(d))

Answer 4

Recursion can be used, but be cautious as it may cause freezing for large objects and potentially result in a Maximum Call Stack exceeded error.

Logic

Iterate over the object and check if all entries are themselves objects.
If they are, a simple
```
Object.keys(obj).map(x=>obj[x])
```
will suffice.
If not, you will need to copy individual values, and if an entry is an object, iterate through it recursively. One way is to loop through each key and return the value if it is not an object.

function ObjectToArray(obj) {
  if (typeof(obj) === 'object') {
    var keys = Object.keys(obj);
    var allObjects = keys.every(x => typeof(obj[x]) === 'object');
    if (allObjects) {
      return keys.map(x => ObjectToArray(obj[x]));
    } else {
      var o = {};
      keys.forEach(x => {
        o[x] = ObjectToArray(obj[x])
      });
      return o;
    }
  } else {
    return obj;
  }
}

var d={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

console.log(ObjectToArray(d))

Answer 5

Answer №3

You can achieve something similar to this approach by looping through the keys of the input object and removing them.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.result = {
      "cats1": {
        "Name": "cricket",
        "imgUrl": "some url",
        "list1": {
          "bat": {
            "Name": "bat",
            "imgUrl": "some url",
            "price": "$100"
          },
          "pads": {
            "displayName": "pads",
            "imgUrl": "some url",
            "price": "$50"
          }
        }
      },
      "cats2": {
        "Name": "football",
        "imgUrl": "some url"
      }
    };
    $scope.format = Object.keys($scope.result).map((key) => $scope.result[key])
  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">

    <div>Formatted</div>
    <pre>{{format | json}}</pre>
  </div>
</div>

Answer 6

You can achieve something similar to this approach by looping through the keys of the input object and removing them.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.result = {
      "cats1": {
        "Name": "cricket",
        "imgUrl": "some url",
        "list1": {
          "bat": {
            "Name": "bat",
            "imgUrl": "some url",
            "price": "$100"
          },
          "pads": {
            "displayName": "pads",
            "imgUrl": "some url",
            "price": "$50"
          }
        }
      },
      "cats2": {
        "Name": "football",
        "imgUrl": "some url"
      }
    };
    $scope.format = Object.keys($scope.result).map((key) => $scope.result[key])
  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">

    <div>Formatted</div>
    <pre>{{format | json}}</pre>
  </div>
</div>

How can I use JavaScript to convert a JSON object into an array for iteration with ng-repeat?

The structure of my JSON object is as follows:

This is the desired array structure:

Answer №1

Answer №2

Logic

Answer №3

Similar questions

transferring data from JavaScript on the client side to Express on the server side

I encountered an issue where the data I passed to a component ended up being undefined

Combining multiple AngularJS expressions to form a URL within an interpolation statement

Transferring Specific Information to Individual Fancybox Instances

Tooltips for Images in Vega Charts

No information available at the moment

Having trouble passing parameters to the Mongo find collection operation

Incorporating a delay into looped HTTP requests while effectively utilizing Promise.all to track their completion

Is there a way to conceal the loading screen until the website has completely loaded?

Overlaying images on top of text

Prevent closure of Bootstrap offcanvas on backdrop click in a Blazor .NET application

Is there a way to deactivate all dot inputs on number type input in vue.js 2?

combine multiple keys into a single element with angular-translate

Instructions on converting Dart to JavaScript for a non-web platform

Learn the steps for converting data from xlsx or csv files into JSON format

Is there a way to retrieve the information from the v-text-field without using the v-model directive?

Using Selenium to assign properties to JavaScript Objects

Is there a way to work around coursera's keyboard input verification using JavaScript?

Tips on how to include a single quote within a JSON value when making a webservice call

What strategies can be implemented to decrease the initial loading duration of a YouTube iframe video?