Question 232688 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Access Nested Object with Changing Wrapper

My problem is I want to access certain nested object but parent may change while doing JSON request.

  "ID": 752357,
  "name": "John Doe",
  "age": 25,
  "status": {},
  "detail": {
    "level": 12,
    "attack": "5",
    "def": "10",
  },
  "item": {
    "890099870": {
      "bag": {
        "12345": {
          "name": "Bones",
          "quantity": 338,
          "status": 0
        },
        "45678": {
          "name": "Iron Ores",
          "quantity": 99,
          "status": 0
        }
      },
      "expire": {
        "start": 1692288000,
        "end": 0,
      }
    }
  },

"item": {
** "890099870"**: {

This part keep changing depend on server update data. And item id will change base on what i have in my inventory.

I want to access and display name and quantity of all in inventory in html table like this.

| ID        | Name      | Quantity |
| --------  | --------  | -------- |
| 12345     | Bones     | 338      |
| 45678     | Iron Ores | 99       |
Tags:

2

Answers


  1. 0

    Use Object.values(product.item)[0] to access the value regardless its key:

    const item = Object.entries(Object.values(product.item)[0].bag).map(([id, bag]) => ({id, ...bag}));
console.log(item);
    <script>
const product = {
  "ID": 752357,
  "name": "John Doe",
  "age": 25,
  "status": {},
  "detail": {
    "level": 12,
    "attack": "5",
    "def": "10",
  },
  "item": {
    "890099870": {
      "bag": {
        "12345": {
          "name": "Bones",
          "quantity": 338,
          "status": 0
        },
        "45678": {
          "name": "Iron Ores",
          "quantity": 99,
          "status": 0
        }
      },
      "expire": {
        "start": 1692288000,
        "end": 0,
      }
    }
  },
}
</script>
    Login or Signup to reply.
  2. 0

    You can use Object.values to get to the bag inside item; then iterate the Object.entries of bag to build your table:

    const bag = Object.values(data['item'])[0].bag

const body = document.getElementById("data-table-body")
Object.entries(bag).forEach(([id, { name, quantity }]) => {
  tr = document.createElement('tr')
  tr.append(...[id, name, quantity].map(v => {
    td = document.createElement('td')
    td.textContent = v
    return td
  }))
  body.append(tr)
})
    <script type="text/javascript">
  data = {
    "ID": 752357,
    "name": "John Doe",
    "age": 25,
    "status": {},
    "detail": {
      "level": 12,
      "attack": "5",
      "def": "10",
    },
    "item": {
      "890099870": {
        "bag": {
          "12345": {
            "name": "Bones",
            "quantity": 338,
            "status": 0
          },
          "45678": {
            "name": "Iron Ores",
            "quantity": 99,
            "status": 0
          }
        },
        "expire": {
          "start": 1692288000,
          "end": 0,
        }
      }
    }
  }
</script>
<table id="data-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody id="data-table-body">
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search