How to Access Nested Array Values in Streaming API Response using JavaScript

Other Questions Twitch
1

I’m working with a streaming platform API that returns JSON data with nested arrays and I can’t figure out how to access specific values properly.

Here’s an example of the API response structure:

{
  "broadcasts": [
    {
      "stream_id": 98765432,
      "title": "Apex Legends Ranked",
      "viewer_count": 8432,
      "start_time": "2023-09-15T14:22:18Z",
      "quality": "1080p",
      "fps_rate": 59.8,
      "streamer_info": {
        "username": "gamerpro_mike",
        "display_title": "MikeTheGamer",
        "subscriber_count": 125000,
        "account_created": "2018-03-12T09:45:33Z",
        "verified_partner": true,
        "current_game": "Apex Legends"
      }
    }
  ],
  "total_results": 1
}

When I try to access something like apiResponse.broadcasts[0].streamer_info.current_game I get undefined errors. I can see in the console that broadcasts appears to be an array with index numbers. How do I properly access the game name and other nested properties from this kind of structure? I’ve tried different approaches but keep getting stuck on the array part.

2

The syntax you’re using looks correct, so this is likely a timing or data type issue. I’ve encountered similar problems when working with API responses that come back as strings instead of parsed JSON objects. Make sure you’re calling JSON.parse() on the response if it’s coming back as a string. Also check that the API actually returned data by verifying apiResponse.broadcasts.length > 0 before trying to access the first element. Another common gotcha is when the response structure changes based on different API endpoints or parameters, so double-check that your test data matches what the actual API returns in your specific use case.

3

I ran into this exact issue before and it turned out my API calls were returning null or undefined at certain points during the response cycle. What helped me was implementing proper error checking at each level of the nested structure. Try using optional chaining if you’re on a modern JavaScript version: apiResponse?.broadcasts?.[0]?.streamer_info?.current_game. Otherwise, wrap your access in a try-catch block or check each level exists first. Also worth checking if your streaming API sometimes returns empty broadcasts arrays during off-peak hours or when no streams match your query parameters. The structure looks right but the data might not always be there when you expect it.

4

sounds like your api response might not be fully loaded when ur trying to access it. try adding a console.log(apiResponse) first to see wats actually there. sometimes streaming apis return the data async so u need to wait for it or use .then() if its a promise