I'm trying to display all of the items in my list below. I organized them as such in order to filter them out.

For example, I want all the titles to be separate from the array items they contain (so that the titles will display as headers and the items as regular text.

Here is my code so far:

var general = { 
    "Hardcover" : { 
        ["Book A",4],
        ["Book B",6],
        ["Book C",5]
    }
    // ... other options 
};

for (var title in general) {
   var title = ...; // assign the title variable
   $('body').append("<h2>" + title + "</h2>");
   for(var items in title) {
      // assign item variables separately 
      var itemTitle = ...;
      var itemPrice = ...;
      $('body').append(itemTitle + ": $" + itemPrice);
   }
}

So the final output would look something like:

Hardcover

Book A: $4
Book B: $6
Book C: $5

I made a quick fiddle below with my full list: /

I'm trying to display all of the items in my list below. I organized them as such in order to filter them out.

For example, I want all the titles to be separate from the array items they contain (so that the titles will display as headers and the items as regular text.

Here is my code so far:

var general = { 
    "Hardcover" : { 
        ["Book A",4],
        ["Book B",6],
        ["Book C",5]
    }
    // ... other options 
};

for (var title in general) {
   var title = ...; // assign the title variable
   $('body').append("<h2>" + title + "</h2>");
   for(var items in title) {
      // assign item variables separately 
      var itemTitle = ...;
      var itemPrice = ...;
      $('body').append(itemTitle + ": $" + itemPrice);
   }
}

So the final output would look something like:

Hardcover

Book A: $4
Book B: $6
Book C: $5

I made a quick fiddle below with my full list: http://jsfiddle/gekp6q8y/1/

• javascript
• jquery
• arrays
• object

Share Improve this question Follow asked Jul 2, 2015 at 0:56 NotToBragNotToBrag 66511 gold badge1717 silver badges3737 bronze badges 2

• If hardcover is an array instead of an object this would work. – Daniel Tate Commented Jul 2, 2015 at 2:02
• Your code is illegal, objects are key-value based. – Leo Commented Jul 2, 2015 at 2:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Objects cannot hold multiple arrays like that. Objects are a data structure that hold key/value pairs. By simply adding arrays separated by mas into the hardcover object, you're treating it like an array (but with curly braces instead of brackets). The Javascript interpreter will reject this.

You can set bookA, bookB, bookC, etc. as keys with their amount as its value. Or you can just give it keys with numbers or something in it:

var general = {
  hardcover: {
    1: ['Book A', 4],
    2: ['Book B', 6],
    3: ['Book C', 5]
  }
};

Then to iterate:

for (var key in general) {
  $('body').append('<h2>' + key + '</h2>');
  for (var book in key) {
    var itemTitle = book[0];
    var itemPrice = book[1];
    $('body').append(itemTitle + ': $' + itemPrice)
  }
}

Alternately, you can have hardcover be a key which stores an array of arrays within general:

var general = {
  hardcover: [
      ['Book A', 4], ['Book B', 6], ['Book C', 5]
    ]
};

From here, you would iterate slightly differently:

for (var key in general) {
  $('body').append('<h2>' + key + '</h2>');
  general[key].forEach(function(elem) {
    var itemTitle = elem[0];
    var itemPrice = elem[1];
    $('body').append(itemTitle + ': $' + itemPrice)
  })
}

http://jsfiddle/gekp6q8y/3/

$( document ).ready(function() {

var general = {
  "Hardcover": [
    ["Book A", 4],
    ["Book B", 6],
    ["Book C", 5]
  ],
  "Ebooks": [
    ["Ebook A", 14],
    ["Ebook B", 98]
  ],
  "PDFs": [
    ["PDF A", 2],
    ["PDF B", 1],
    ["PDF C", .5]
  ],
  "Free Texts": [
    ["FA A", 4],
    ["FA B", 6],
    ["FA C", 5]
  ],

};

for (var title in general) {
  $(".contSelf").append("<h1 > " + title + "</h1>");

  for (var bookArr in general[title]) {
    //  console.log(general[title][book]);
    var book = general[title][bookArr];
    $(".contSelf").append("<li class='book' > " + book[0] + ' :$' + book[1] + "</li>");

  }
}
  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='contSelf'></div>