How do I add an empty array to an object array?

Question

basically I have an array that I pull data from. I would like to add a new array to it so I can pull additional data.

var myArray.libraries = []

gets items added via a for loop like this:

for(var x=0; x < items.length; x++){
    myArray.libraries ({ name: items(x).name, state: items(x).state});
}

that works great and I can get what I need from myArray.libraries .name . I need to add something like "books" so each entry can have it's list of books. There could be 1 or more books.

to be clear I'm using angular so I use something like this to output for each library:

<div ng-repeat="library in libraries">
    <p>{{library.name}}</p>
</div>

I just need to add books so I can loop through each book in that library:

<div ng-repeat="book in libraries.books">
    <p>{{book.name}}</p>
</div>

I tried using myArray.libraries.books = [] but that didn't add the collect to each library. I also tried myArray.libraries.push({ books: { } }) but that didn't have any affect and gave me an error that I couldn't push to myArray.libraries.books since books didn't exist.

EDIT

Here's some sample code. I'm using angular but the principle should be the same:

$scope.libraries= [];

//start loop to get the installations
for (var x = 0; x < res.rows.length; x++) {
    $scope.libraries.push({ ... , books: []});

    //run a new query to get the additional libraries info
    var booksQuery = query to get books;
    //run query to get results and loop through them
        for (var i = 0;i < res2.rows.length; i++) {
            $scope.libraries[x].books.push({ name: res2.rows.item(i).prodName });
        }
    });
}

EDIT

I ran some tests and it turns out when I do my second database call it doesn't know the original $scope exists.

Answer 1

Try as follows:

for(var x=0; x < items.length; x++){
    myArray.libraries ({ name: items(x).name, state: items(x).state, books: []});
}

That should do the trick.

Answer 2

Basically the problem is that you are trying to push array to an array. You can push another array to your libraries , but to access books you have to use index to access specific item like myArray.libraries[0].books[0]

So I assume you have to change myArray.libraries.push({ books: { } }) to myArray.libraries.push({ books: [] })

Answer 3

I have created a plunker for you. Please refer to

" http://plnkr.co/edit/0FKg2fbe4CY11Oz6aSBF?p=preview "

$scope.libraries = {
    books : [
  {"name" : "book1"},
  {"name" : "book2"},
  {"name" : "book3"}
      ]


  };

Answer 4

This will help you.

DB calls are async, so the 2nd db call shouldn't be in loop. Please check if this works

$scope.libraries = [];  

  init();

  function init() {
    // do the first db transaction
  }

  // transaction1 callback
  function trans1Callback(result) {    
    addBooks(result);
  }

  var i = 0;

  function addBooks(result) {
      // to stop iteration at the end of records
      if (i >= result.rows.length) {
        return;
      }
      var item = result.rows.item(i);
      var data = {name: item.name, state: item.state, books: []};
      // do the second db transaction

      // transaction2 callback
      function trans2Callback(result2) {

          for (var j =0; j < result2.rows.length; j++) {
              var book = result.rows.item(j);
              data.books.push({ name: book.prodName });
          }
          // push to scope libraries
          $scope.libraries.push(data);
          // do increment
          i++;
          // Call addBooks again to process next record
          addBooks(result);
      }

  }