Home > front end >  Retrieve multidimensional JSON data where index number is randomized/unknown
Retrieve multidimensional JSON data where index number is randomized/unknown

Time:08-20

Been delivered some confusing JSON data with a problem I haven't seen before.

The JSON is formatted similar to this structure:

[
  {
    "title": "Event",
    "start_date": "2022-08-20 15:00:00",
    "end_date": "2022-08-20 16:00:00",
    "branch": {
      "85": "branchname"
    },
    "room": {
      "156": "roomname"
    },
    "age_group": {
      "5": "Youth",
      "6": "Teen"
    }
  },
  {
    "title": "Event02",
    "start_date": "2022-08-20 15:00:00",
    "end_date": "2022-08-20 16:00:00",
    "branch": {
      "72": "branchname"
    },
    "room": {
      "104": "roomname02"
    },
    "age_group": {
      "5": "Youth",
      "6": "Teen"
    }
  }
]

I'm trying to pull roomname out of the data, but it's nested in an object that has a random index number. If I manually put in the index number, I can retrieve the data, but the number changes every entry.

If I can figure out how to retrieve the number and store it in a variable, then use it again, or just somehow wildcard to just show any child of any key under the parent node "room" it would work perfect, but I don't know of a way to do this in javascript.

I'm limited to vanilla javascript, no external libraries or jquery.

here is the code that will output correctly if I manually enter the index numbers, but it only works for a single entry.

<script>
    const url = 'example.json';
    fetch(url) 
        .then((response) => { 
            return response.json(); 
        }) 
        .then((json) => { 
            json.map(function(event) { 
                console.log(`${event.start_date}`);
                console.log(`${event.title}`);
                console.log(`${event.room[156]}`);
                return element;
            });
    }, 80);

</script>

EDIT: Forgot to point out, there is always only 1 entry in the "room" tag, but it's index is randomized, so if you just select the room tag it returns undefined or invalid. If I could wildcard the index so it just tries them all, or somehow retrieve the index number and store it in a variable, it would fix the issue.

CodePudding user response:

As long as you always want the first key you can fetch it like this

room = event.room[Object.keys(event.room)[0]]

CodePudding user response:

if you want to get just roomname, you could do Object.values(room)[0] or if you want the index and value you could go for Object.entries(room)[0]

CodePudding user response:

arr?.map(({ room }) => {
    for(let [key, value] of Object.entries(room)) {
        console.log('Random Key : ',key)
        console.log('Roomname : ', value)
        console.log('Using random key : ',room[key])
    }
})

By this way you can find the value of room against the random key.

Or you can try this if it is more relevant to you.

arr.map(({ room }) => {
    for(let key of Object.keys(room)) {
        console.log('Random Key : ',key)
        console.log('Using random key : ',room[key])
    }
})

CodePudding user response:

I think this will work:

<script>
    const url = 'example.json';
    fetch(url) 
        .then((response) => { 
            return response.json(); 
        }) 
        .then((json) => { 
            json.map(function(event) {
                const roomName = Object.values(event.room)?.[0];
                console.log(`${event.start_date}`);
                console.log(`${event.title}`);
                console.log(`${roomName}`);
                return {...event, room: roomName};
            });
    }, 80);

</script>
  • Related