Home > Back-end >  Find object in a list using HMTL and JavaScript fetch
Find object in a list using HMTL and JavaScript fetch

Time:11-06

How can I navigate through a list using fetch and the query selector in HTML. When I try this solution and I try to put the result onto my page it tries to find the key "0" instead of the place 0 on the list. Does anyone know how I can either iterate through it or find one place in the list?

<script>
    fetch("https://queue-times.com/parks/1/queue_times.json")
        .then(response => response.json())
        .then(data => {document.querySelector("#mainKey").innerText = data.lands.0.rides.0.name});
</script>

My apologies for using the incorrect terminology too.

CodePudding user response:

Use [] to get the position from array.

<script>
    fetch("https://queue-times.com/parks/1/queue_times.json")
        .then(response => response.json())
        .then(data => {document.querySelector("#mainKey").innerText = data.lands[0].rides[0].name})
</script>

Sample code:

var data = {"lands":[{"id":764,"name":"Family","rides":[{"id":4614,"name":"Battle Galleons","is_open":true,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4642,"name":"Bugbie-Go-Round","is_open":true,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4634,"name":"Congo River Rapids","is_open":false,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4616,"name":"Cuckoo Cars Driving School","is_open":true,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4617,"name":"Duel - The Haunted House Strikes Back","is_open":true,"wait_time":20,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":8828,"name":"Flavio's Fabulous Fandango","is_open":true,"wait_time":15,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":7341,"name":"Gangsta Granny: The Ride","is_open":true,"wait_time":55,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4632,"name":"Get Set Go Tree Top Adventure","is_open":true,"wait_time":35,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4633,"name":"Go Jetters Vroomster Zoom Ride","is_open":true,"wait_time":10,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4621,"name":"Heave Ho","is_open":true,"wait_time":5,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4628,"name":"Hex - The Legend of the Towers","is_open":false,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4639,"name":"In The Night Garden Magical Boat Ride","is_open":true,"wait_time":25,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4622,"name":"Justin's House Pie-O-Matic Factory","is_open":true,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4625,"name":"Marauder's Mayhem","is_open":true,"wait_time":5,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4636,"name":"Octonauts Rollercoaster Adventure","is_open":true,"wait_time":40,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":6384,"name":"Peter Rabbit Hippity Hop","is_open":true,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4630,"name":"Postman Pat Parcel Post","is_open":true,"wait_time":20,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4618,"name":"Raj’s Bouncy Bottom Burp","is_open":true,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4623,"name":"Runaway Mine Train","is_open":true,"wait_time":15,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4624,"name":"The Blade","is_open":true,"wait_time":15,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4620,"name":"The Royal Carousel","is_open":true,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"}]},{"id":85,"name":"Thrills","rides":[{"id":4627,"name":"Enterprise","is_open":true,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":8724,"name":"Funk’n’Fly","is_open":true,"wait_time":15,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4619,"name":"Galactica","is_open":true,"wait_time":60,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":8723,"name":"Mixtape","is_open":true,"wait_time":60,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4641,"name":"Nemesis","is_open":true,"wait_time":45,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4635,"name":"Oblivion","is_open":true,"wait_time":30,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4637,"name":"Rita","is_open":true,"wait_time":90,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":8722,"name":"Roller Disco","is_open":true,"wait_time":45,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4638,"name":"Spinball Whizzer","is_open":true,"wait_time":60,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4631,"name":"TH13TEEN","is_open":false,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":4640,"name":"The Smiler","is_open":false,"wait_time":0,"last_updated":"2021-11-06T13:40:13.000Z"},{"id":5489,"name":"Wicker Man","is_open":true,"wait_time":90,"last_updated":"2021-11-06T13:40:13.000Z"}]}],"rides":[]};

console.log(data.lands[0].rides[0].name);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related