JavaScript JSON parsing issue with nested arrays

Other Questions JavaScript
1

I’m having trouble with my JSON data structure and need help figuring out what’s wrong.

Here’s my sample data:

var inventory = {
  "items": [
    {
      "details": [
        {
          "id": "001",
          "cost": "250",
          "code": "ABC123XYZ",
          "brand": "Samsung",
          "title": "Device A",
          "info": "This platform consists of two main sections: the frontend (visible to users) and the backend (used for management tasks). Access to the backend requires separate login credentials.",
          "category_id": "1",
          "stock": "50"
        }
      ],
      "variants": [
        {
          "color": [
            {"green": "+15", "available": "3"},
            {"black": "+25", "available": "1"}
          ]
        },
        {
          "size": [
            {"Small": "+5", "available": "2"},
            {"Medium": "+15", "available": "6"}
          ]
        }
      ]
    }
  ],
  "sections": [
    {"id": 1, "title": "Section A", "info": "First section details"},
    {"id": 2, "title": "Section B", "info": "Second section details"}
  ]
};

This works perfectly:

inventory.sections.each(function(section){
  var option = new Option(section.title, section.id);
  try {
    dropdown.add(option, null)
  } catch (error) {
    dropdown.add(option)
  }
});

But this returns undefined:

inventory.items.each(function(item){
  var wrapper = new Element('div.card'),
      title = new Element('h2', {
        'html': '<a href="#item/' + parseInt(item.details.id) + '">' + item.details.title + '</a>'
      }).inject(wrapper),
      description = new Element('p', {'html': item.details.info}).inject(title, 'after');
  wrapper.inject(container);
});

Why does the second code block fail while the first one works? The structure looks similar to me but I must be missing something about how to access nested arrays properly.

2

Yeah, classic array vs object mixup. You’ve got details wrapped in brackets [], making it an array with just one item. When you do item.details.id, JavaScript can’t find an id property on the array itself - that’s why you’re getting undefined. You need to index into it first: item.details[0].id to actually grab the object inside. Sections works fine because it’s a straightforward array of objects, but details has that extra array layer you’re missing.

3

Your JSON structure is the issue here. In your working sections code, you’re accessing properties directly like section.title and section.id because each section object has these as direct properties. But with your items structure, details is an array containing objects - not a single object. When you write item.details.id, you’re trying to get the id property from the array itself, which doesn’t exist. The objects inside the array have those properties. You need to specify which element in the details array you want first. Since you only have one details object per item, use item.details[0].id, item.details[0].title, and item.details[0].info instead. This grabs the first object from the details array, then accesses its properties.

4

The issue is that item.details is an array, not an object. Your data structure has a details array containing objects, so you need to grab the first element before accessing properties. Change item.details.id, item.details.title, and item.details.info to item.details[0].id, item.details[0].title, and item.details[0].info. Your sections code works fine because sections is a direct array of objects. But details is an array nested inside each item - you’re trying to access properties on the array instead of the object inside it. Pretty common mistake with nested JSON. Always double-check if you’re dealing with an array or object at each level.