How to get to object inside object - json

Question

I've problem with json file. I've main Object which has another Object and I can't get to that Object.

"vendors": {
"1": {
  "id": 1,
  "name": "Exponential Interactive, Inc d/b/a VDX.tv",
  "policyUrl": "https://vdx.tv/privacy/",
},
"2": {
  "id": 2,
  "name": "Captify Technologies Limited",
  "policyUrl": "https://www.captify.co.uk/privacy-policy-opt/",
},
"4": {
  "id": 4,
  "name": "Roq.ad Inc.",
  "policyUrl": "https://www.roq.ad/privacy-policy",
},

I need to get to "name" property and display it in li tag. I wrote something like this:

fetch("jsonpage")
  .then((res) => res.json())
  .then((data) => {
    for (const number of Object.keys(data.vendors)) {
      let newVendor = document.createElement("li");
      newVendor.textContent = number;
      ulList.appendChild(newVendor);
    }
  })
  .catch(console.error);

but I only have access to numbers "1", "2", "4" and I don't know what to do next.

Why `Object.keys()` when you also want the value of the "key"? Have a look at `Object.entries()` — Andreas, Apr 09 '21 at 15:58
[Just iterate over the values, instead of the keys](https://jsbin.com/dawosal/1/edit?html,js,output) — VLAZ, Apr 09 '21 at 16:26

score 1 · Answer 1 · answered Apr 09 '21 at 15:55

1

You can access the object by key as follows.

Objects.keys(data.vendors).forEach((key) => {
  console.log(data.vendors[key]);
  console.log(data.vendors[key].name);
})

answered Apr 09 '21 at 15:55

Farid Ansari

813
5
7

score 1 · Answer 2 · answered Apr 09 '21 at 15:56

I don't have the complete code, but I believe it may work. Use the number as a index of the array vendors:

fetch("jsonpage")
  .then((res) => res.json())
  .then((data) => {
    for (const number of Object.keys(data.vendors)) {
      let newVendor = document.createElement("li");
      newVendor.textContent = data.vendors[number].name;
      ulList.appendChild(newVendor);
    }
  })
  .catch(console.error);

score 1 · Answer 3 · answered Apr 09 '21 at 16:03

You can simply loop over data.vendors using a for in loop.

const data = {
  vendors: {
    '1': {
      id: 1,
      name: 'Exponential Interactive, Inc d/b/a VDX.tv',
      policyUrl: 'https://vdx.tv/privacy/',
    },
    '2': {
      id: 2,
      name: 'Captify Technologies Limited',
      policyUrl: 'https://www.captify.co.uk/privacy-policy-opt/',
    },
    '4': {
      id: 4,
      name: 'Roq.ad Inc.',
      policyUrl: 'https://www.roq.ad/privacy-policy',
    },
  },
};

for (const key in data.vendors) {
  console.log("id", data.vendors[key].id)
  console.log("name", data.vendors[key].name)
  console.log("url", data.vendors[key].policyUrl)
}

score 0 · Accepted Answer · answered Apr 09 '21 at 15:55

you can try this:

fetch("jsonpage")
  .then((res) => res.json())
  .then((data) => {
    for (const number of Object.keys(data.vendors)) {
      let newVendor = document.createElement("li");
      newVendor.textContent = number;
      ulList.appendChild(newVendor);
      //then let's get another things;
      let name = data.vendors[number]['name']
      let policyurl = data.vendors[number]['policyUrl']
    }
  })
  .catch(console.error);

How to get to object inside object - json

4 Answers4