TypeError: Cannot read properties of undefined (reading 'array_google') reading from JSON file with defined template

Question

I have used the following

Template file -- to read the json file, as it is in the given format

export type GList = {
    hop_num: number,
    hostname: string,
    ip_address: string,
    latitude: number,
    longitude: number;
    rtt: string;
  };

  export type IUList = {
    hop_num: number,
    hostname: string,
    ip_address: string,
    latitude: number,
    longitude: number;
    rtt: string;
  };
  
  export type iData = {
    array_google : GList[];
    array_iu : IUList[];
    time : number;
};
  
  export type ResponseData = {
    ids: iData;
  };

Component File

import { ReactChild } from "react";
import { GList } from "../types";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

interface Props {
    google_list:GList[];
    
}

const Map_test: React.FunctionComponent<Props> = ({
    google_list
}) => {
    return(
        <div id="sample">
            <MapContainer>
            {google_list.map((trset) => (
            <Marker
            key={trset.hop_num}
            position={[trset.latitude, trset.longitude]}
            ></Marker>
            ))}
            </MapContainer>
        </div>
    );
};

export default Map_test;

App.tsx file

import { useEffect, useState } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "./App.css";
import trdata from "./data/tracedata.json";
import { Line } from "react-chartjs-2";
import { Chart } from "chart.js";
import type { ResponseData, IUList, GList, iData } from "./types";
import Map_test from "./components/Map_test";

const App: React.FunctionComponent = () => {
  const [data, setData] = useState<ResponseData | undefined>(undefined);

  const fetchData = async () => {
    const result = await fetch("http://18.223.114.82/pastfive");
    const data :ResponseData = await result.json();
    const id_num : number = 1;

    setData(data);
    console.log(data);
  };

  useEffect(() => {
  fetchData();
  }, []);

  // console.log(trdata[1]['google.com']);
  return (
    <div id="sample">
      <div id="heading">
        <h1>TraceRoute Analysis</h1>
      </div>
      <div>
      {data ? (
        <>
           <div>
      {data ? (
        <>
          <Map_test
            google_list={data.ids.array_google} \\ error at this line
          />
        </>
      ) : (
        "Loading..."
      )}
    </div>
        </>
      ) : (
        "Loading..."
      )}
    </div>
     
      <div id="myData"></div>
      <script></script>
    </div>
  );
};

export default App;

Hi, I have searched multiple resources online, but I think this is rather a complicated JSON file I am trying to read. Even though I have described the correct data type, it is unable to fetch the data and is throwing the following error.

TypeError: Cannot read properties of undefined (reading 'array_google')

Would really appreciate a little help in this.

Answer 1

The error means that the property array_google cannot be read because data.ids is not set.

If it is possible for data.ids to be undefined, then it should be defined as optional.

export type ResponseData = {
  ids?: iData;
};