SWR + NextJS - Nested Objects & Arrays

Question

I am attempting to pull API Data from a Server using SWR & NextJS. The API Data Contains an Array, that array contains objects which contains another array. I am able to output the data from the parent array but not the child array. Form my understanding there is a is an issue with data.location.statistics.map as it returns the error TypeError: Cannot read properties of undefined (reading 'map')

There is most likely a very simple solution, apologies this is all new to me

The Code Tried

"use client";
import React from 'react';
import useSWR from 'swr';

export default function Home() {

  const resource = "https://api.npoint.io/1a3c1760fd86a94b1ff5"
  const fetcher = (url: RequestInfo | URL) => fetch(url).then((res) => res.json());
  const { data, error, isLoading } = useSWR(resource, fetcher)

    if (error) return <div>failed to load</div>
    if (isLoading) return <div>loading...</div>

    return (
        <div>
            {data.location.map((locationData: { id: string; location: string; manager: string; }) => {
                return (
                    <div>
                        <p>{locationData.id}</p>
                        <p>{locationData.location}</p>
                        <p>{locationData.manager}</p>
                    </div>
                )
            })}

            {data.location.statistics.map((statisticsData: { type: string; rank: string; }) => {
                return (
                    <div>
                        <p>{statisticsData.type}</p>
                        <p>{statisticsData.rank}</p>
                    </div>
                )
            })}
    </div>
  );
}

Answer 1

The api provided returns location as an array. Therefore you may have to loop over the data.location because as an array, location does not have properties. The statistics is a property of the objects contained in the data.location array among with id, location and manager.

Since you are already mapping over it, you should access the statistics as below:

'use client';
import React from 'react';
import useSWR from 'swr';

export default function Home() {
  const resource = 'https://api.npoint.io/1a3c1760fd86a94b1ff5';
  const fetcher = (url: RequestInfo | URL) =>
    fetch(url).then((res) => res.json());
  const { data, error, isLoading } = useSWR(resource, fetcher);

  if (error) return <div>failed to load</div>;
  if (isLoading) return <div>loading...</div>;

  return (
    <div>
      {data.location.map(
        (locationData: {
          id: string;
          location: string;
          manager: string;
          statistics: [{ type: string; rank: string }];
        }) => {
          console.log(locationData);
          return (
            <>
              <div>
                <p>{locationData.id}</p>
                <p>{locationData.location}</p>
                <p>{locationData.manager}</p>
              </div>
              <div>
                {locationData.statistics.map((stat) => {
                  return (
                    <>
                      <p>{stat.type}</p>
                      <p>{stat.rank}</p>
                    </>
                  );
                })}
              </div>
            </>
          );
        }
      )}
    </div>
  );
}

Hope it helps.