Unable to display varying json data recevied from api in react

Question

I am trying to display json data received from api. But lenght of array inside json and tags of json data are of not fixed. For some json responses I am having no issues but when length of array or tags are altered, I am getting "unhandled Rejection (TypeError): Cannot read property 'start' of undefined (anonymous function)" What I want is to display the whole data and ignore tags for which data is null.

{
    "time": 3,
    "annotations": [
        {
            "start": 4,
            "end": 13,
            "spot": "Mona Lisa",
            "confidence": 0.8905,
            "id": 70889,
            "title": "Mona Lisa",
            "uri": "http://en.wikipedia.org/wiki/Mona_Lisa",
            "label": "Mona Lisa"
        },
        {
            "start": 32,
            "end": 44,
            "spot": "oil painting",
            "confidence": 0.8167,
            "id": 22605,
            "title": "Oil painting",
            "uri": "http://en.wikipedia.org/wiki/Oil_painting",
            "label": "Oil painting"
        },
        {
            "start": 56,
            "end": 64,
            "spot": "Leonardo",
            "confidence": 0.7723,
            "id": 18079,
            "title": "Leonardo da Vinci",
            "uri": "http://en.wikipedia.org/wiki/Leonardo_da_Vinci",
            "label": "Leonardo da Vinci"
        },
        {
            "start": 83,
            "end": 89,
            "spot": "Louvre",
            "confidence": 0.8942,
            "id": 17546,
            "title": "Louvre",
            "uri": "http://en.wikipedia.org/wiki/Louvre",
            "label": "Louvre"
        },
        {
            "start": 93,
            "end": 98,
            "spot": "Paris",
            "confidence": 0.7777,
            "id": 22989,
            "title": "Paris",
            "uri": "http://en.wikipedia.org/wiki/Paris",
            "label": "Paris"
        }
    ],
    "lang": "en",
    "langConfidence": 1.0,
    "timestamp": "2019-11-20T07:27:47.008"
}

---

QUERY 2:NASA was established in 1958.

Json Response:

{
    "time": 1,
    "annotations": [
        {
            "start": 1,
            "end": 5,
            "spot": "NASA",
            "confidence": 0.8143,
            "id": 18426568,
            "title": "NASA",
            "uri": "http://en.wikipedia.org/wiki/NASA",
            "label": "NASA"
        }
    ],
    "lang": "en",
    "langConfidence": 0.5051,
    "timestamp": "2019-11-20T07:29:02.227"
}

I am repeating code inside of for loop for total of 5 times for now as json range is not known. ie data3.map(y => y.annotations[1].start) data3.map(y => y.annotations[2].start)

and so on till 4.

'''
const data1 = JSON.parse(res.data.jsondata);
const data2 = '[' + res.data.jsondata + ']';
const data3 = JSON.parse(data2);
console.log('loop log for faceId', data3)
        let y = "";
        for (let y of data3) {
            const face = y.annotations
            console.log('loop lenght', data3.map(y =>y.annotations.lenght))
            this.setState({

                lenght: data3.map(y => y.annotations.lenght),
                Start: data3.map(y => y.annotations[0].start),
                End: data3.map(y => y.annotations[0].end),
                Spot: data3.map(y => y.annotations[0].spot),
                Confidence: data3.map(y => y.annotations[0].confidence),
                Id: data3.map(y => y.annotations[0].id),
                Title: data3.map(y => y.annotations[0].title),
                URL: data3.map(y => y.annotations[0].uri),
                Label: data3.map(y => y.annotations[0].label),
        )}
}

'''

Answer 1

You have to put an undefined check wherever you are using the tags example

const start = data.annotations ? data.annotations.start : "" ;

You have to do null check for these. Or you can also run a loop to check for undefined and null check and then ignore the tags with these values. It depends how you are using these tags.