Create multidimensional / nested object in Angular (nested forEach loops)

Question

I need to understand how to create a multidimensional object or array in Angular / JS. This JSFiddle should explain the problem clearly: https://jsfiddle.net/s3etbdyj/5/

How do I forEach loop within a forEach loop? To summarise:

I have some data which is easy to display in my application.

"albums":[{
    "album_id": 1,
    "album_title": "Test Release",
    "created_at": "-0001-11-30 00:00:00",
    "updated_at": "-0001-11-30 00:00:00",
    "songs": [{
      "id": 114,
      "title": "Test song",
    }, {
      "id": 115,
      "title": "Test song 2",
    }],
    }, {
    "album_id": 2,
    "album_title": "Blood Sugar Sex Magik",
    "created_at": "-0001-11-30 00:00:00",
    "updated_at": "-0001-11-30 00:00:00",
    "songs": [{
      "id": 116,
      "title": "Give It Away",
    }, {
      "id": 117,
      "title": "Under The Bridge",
    }],
 }]

As you can see, each "albums" object can have several "songs" objects within it.

I need to loop through this data and rebuild it (so that I can add things and format it as I see fit)

How do I create nested objects data in this structure? Here's what I have so far:

$scope.newData = [];

      // create formatted song list
        angular.forEach($scope.origData, function(m) {
                $scope.newData.push({
                  'album_id'  : m.album_id,
                  'album_title'      : m.album_title,
                });
                angular.forEach(m.songs, function(tr) {
                    var obj = {
                        id: tr['id'],
                        title: tr['title'],
                                }
                    $scope.newData.push(obj);
                });
        }, $scope.newData)

But that doesn't work. It creates a flat structure:

 Object:
  {
    "album_id": 1,
    "album_title": "Test Release",
    "created_at": "-0001-11-30 00:00:00",
    "updated_at": "-0001-11-30 00:00:00",
  }
  Object: 
      {
        "id": 114,
        "title": "Test song",
      }
  Object:
      {
        "id": 115,
        "title": "Test song 2",
        }
  etc...

Have a look at the JSfiddle: https://jsfiddle.net/s3etbdyj/5/ Can anyone make my newData look just like my origData, thus explaining how nested objects are created?! Thanks.

so. where are you supposed to push the songs? Currently you are pushing them to the same level, where you push the album. — Vladimir M
– Vladimir M, Commented Sep 29, 2016 at 11:55
I want to push them into an object called "songs" within each album. But i can't get the syntax right! — Leon
– Leon, Commented Sep 29, 2016 at 11:56

jcubic · Accepted Answer · 2016-09-29 11:55:43Z

2

Try this:

  $scope.newData = [];

  // create formatted song list
    angular.forEach($scope.origData, function(m) {
            var album = {
              'album_id': m.album_id,
              'album_title': m.album_title,
              'songs': []
            };
            $scope.newData.push(album);
            angular.forEach(m.songs, function(tr) {
                var obj = {
                    id: tr['id'],
                    title: tr['title'],
                };
                album.songs.push(obj);
            });
    }, $scope.newData);

answered Sep 29, 2016 at 11:55

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leon Over a year ago

Thats got it! Thanks. That helps me understand what's going on so much better!

Paul · Accepted Answer · 2016-09-29 11:58:40Z

1

You're pushing everything into $scope.newData, of course it's flat. Try creating the album object first, then in your second loop pushing the songs into its songs array. Something like:

var album = { title : "whatever", songs: [], ...}; angular.forEach(m.songs, function(tr){ album.songs.push({title: "whatever",...}) } $scope.newData.push(album);

Sorry for the formatting I'll fix it when I'm not on my phone.

answered Sep 29, 2016 at 11:58

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Collectives™ on Stack Overflow

Create multidimensional / nested object in Angular (nested forEach loops)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related