How to access JSON object in javascript?

Question

I want to select the "artist" and put it in the selector and I want to keep it in vannila javascript.

I thought this would select the artist from my JSON file.

option.text = data[i].artist;

My JSON

{
  "Albums": {
    "Krezip": [
      {
        "artist":"Krezip",
        "title":"Days like this",
        "tracks": [
          {
            "title":"Lost without you",
            "src":"https://www.youtube.com/embed/zazrmePIL9Y",
            "dur":"3:35"
          },
          {
            "title":"I would stay",
            "src":"https://www.youtube.com/embed/kfrGFGHU6YA",
            "dur":"4:04"
          }
        ]
      }
    ],
    "Cure": [
      {
        "artist":"The Cure",
        "title":"Wish",
      }
    ]
  }
}

And my javascript

const data = JSON.parse(request.responseText);
    let option;
    for (let i = 0; i < data.length; i++) {
        option = document.createElement('option');
        option.text = data[i].artist;
        dropdown.add(option);
    }

Can you give a more elaborate JSON, which has multiple entries per array, and then add what the expected output would be for *that* example? — trincot, Jul 06 '22 at 13:55

score 0 · Answer 1 · answered Jul 06 '22 at 13:36

0

You first need to target Albums.Krezip and then iterate through Krezip like you've done before to access artist field.

If your variable data is the same as the Json you posted.

It would be : data.Albums.Krezip[i].artist

answered Jul 06 '22 at 13:36

Thomas Crombez

9
1

I have updated the JSON snippet because I don't think this will work on what I have – Robin Jul 06 '22 at 13:46
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 07 '22 at 07:09

Subham Bhattacharya · Answer 2 · 2022-07-06T13:48:51.383

0

your json

const json = {
  "Albums": {
    "Krezip": [
      {
        "artist":"Krezip",
        "title":"Days like this",
      }
     ]
  }
}

inside for loop

const albums = json.Albums // this is an array of albums

for(let key of Object.keys(albums)){
    const album = albums[key]
    // If this is an array then you might need to loop through them
    console.log(album[0])
}

edited Jul 06 '22 at 13:48

answered Jul 06 '22 at 13:38

Subham Bhattacharya

114
1
4

I have updated the JSON snippet because I don't think this will work on what I have – Robin Jul 06 '22 at 13:46

Serge · Answer 3 · 2022-07-06T14:06:48.467

0

try this

for (const prop in data.Albums) {
  let item = data.Albums[prop];
  for (let i = 0; i < item.length; i++) {
    option = document.createElement("option");
    option.text = item[i].artist;
   dropdown.add(option);
  }
}

edited Jul 06 '22 at 14:06

answered Jul 06 '22 at 13:46

Serge

40,935
4
18
45

trincot · Answer 4 · 2022-07-06T13:54:49.127

Replace:

const data = JSON.parse(request.responseText);

With:

const data = Object.values(JSON.parse(request.responseText).Albums)
                   .map(arr => arr[0]);

const request = { responseText: '{"Albums":{"Krezip":[{"artist":"Krezip","title":"Days like this"}],"Cure":[{"artist":"The Cure","title":"Wish"}]}}' };

const data = Object.values(JSON.parse(request.responseText).Albums)
                   .map(arr => arr[0]);
let option;
for (let i = 0; i < data.length; i++) {
    option = document.createElement('option');
    option.text = data[i].artist;
    dropdown.add(option);
}

<select id="dropdown"></select>

Andy · Accepted Answer · 2022-07-06T14:30:58.300

Your loop won't work because your parsed data is an object which doesn't have a length property.

If you just want the artist names to populate a dropdown use Object.keys to get an array of artist names and iterate over it. You can use a loop as in your example, or for...of as I've done here - a working example using an existing select element (since I don't know what dropdown does).

const select = document.querySelector('select');

const json = '{"Albums": {"Krezip": [{"artist":"Krezip","title":"Days like this"}],"Cure": [{"artist":"The Cure","title":"Wish"}]}}';

const data = JSON.parse(json);

// `Object.keys` returns an array of artists
const artists = Object.keys(data.Albums);

for (const artist of artists) {
  const option = document.createElement('option');
  option.textContent = artist;
  option.value = artist;
  select.appendChild(option);
}

<select>
  <option disabled selected>Choose an artist</option>
</select>

Alternatively, if you want both the artist name and the album information available in the loop, use Object.entries. Destructure the artist name (key) and the album list (value), and use artist to update your drop-down list. You can then also do something else with the album array should you wish.

const select = document.querySelector('select');

const json = '{"Albums": {"Krezip": [{"artist":"Krezip","title":"Days like this"}],"Cure": [{"artist":"The Cure","title":"Wish"}]}}';

const data = JSON.parse(json);

// `Object.entries` returns an array of key/value pairs
const entries = Object.entries(data.Albums);

// We can destructure the key/value pairing and call
// them something more meaningful. Then just use that data
// to create the options
for (const [artist, albums] of entries) {
  const option = document.createElement('option');
  option.textContent = artist;
  option.value = artist;
  select.appendChild(option);
  console.log(JSON.stringify([artist, albums]));
}

<select>
  <option disabled selected>Choose an artist</option>
</select>

I did not know that length was not possible there thank you, I do have a small question if I want the tracks in the album to display how would I do that? "Krezip": [ { "artist":"Krezip" "tracks": [ { "title":"Lost without you", }, — Robin, Jul 06 '22 at 15:25
If you select an artist you want the tracks to appear in a `div` or something? @Robin — Andy, Jul 06 '22 at 16:50
I want to put the tracks in another selector but only the one under the artist — Robin, Jul 07 '22 at 12:32
Why don't you give it a go yourself first. Add another select, add an event listener to the first select, and when it changes find the tracks in the data that match the artist and add them to the second select. If you run into problems post a new question with that code and we'll try and help you out. @Robin — Andy, Jul 07 '22 at 12:36
I made some changes but still got error's I could not figure out I made a new post https://stackoverflow.com/questions/72898734/add-tracks-from-json-to-selector-based-on-value-of-first-selector — Robin, Jul 07 '22 at 13:30

How to access JSON object in javascript?

5 Answers5