JSON array inside JSON array,,,

Question

I have an array that I am passing from back end to my react app using fetch.

I'm trying to use transaction so I can pass multiple SQL queries in one fetch, which is fine. I'm struggling with accessing the data.

Perhaps I've come across the solution already on here and missed it because everything I tried does not work - it feels like it should be very simple and I'm being stupid though :)

In react/javascript when I console.log the api response from my api I get the below JSON:

[{
    "query": "SELECT xxxxxxx QUERY1 example",
    "type": "query",
    "params": [{
        "name": "p1",
        "value": "testtransaction",
        "direction": 0,
        "isNullable": false,
        "precision": null,
        "scale": null,
        "size": null
    }],
    "result": [
        [{
            "UNITS": 18415,
            "LINES": 11479,
            "ORDERS": 2837
        }]
    ]
}, {
    "query": "SELECT xxxxxxx QUERY2 example",
    "type": "query",
    "params": [],
    "result": [
        [{
            "UNITS": 19736,
            "ORDERS": 4129,
            "LINES": 12687,
            "LOCATIONS": 12690
        }]
    ]
}, {
    "query": "SELECT xxxxxxx QUERY3 example",
    "type": "query",
    "params": [],
    "result": [
        [{
            "UNITS": 19646,
            "ORDERS": 3035,
            "LINES": 12683
        }]
    ]
}]

if I try like, apiResponse[0], apiResponse1 or apiResponse[2] I can drill down into each individual query.

Next I've been trying to get the the result part (another array) I've tried

apiResponse[0]["result"][0]
apiResponse[0].result[0]
[apiResponse[0]["result"][0]]

and everything in between.

Basically I just want to access my result data in different variables! The code below returns the JSON above and sets it as apiResponse

useEffect(() => {

      async function fetchData() {


        setIsError(false)

        try{
          const res = await fetch(`http://localhost:9447/smartApi/speedtest`,{
            method: 'POST',
            mode: 'cors',
            headers: {'content-type': 'application/json',
            credentials: 'include'
          }
          })
        res
        .json()
        .then(res => setApiResponse(res))

        } catch (error) {
          setIsError(true);
        }

        setIsLoading(false)
        }

      fetchData();

      setInterval(fetchData, interval);

    }, [interval]);

    const data = apiResponse
    console.log(data)

I just end up with undefined or not expected type errors. If someone could guide me for example how I would get the number of units in array 1 of results (19736) that would be very useful!

edit:

I'v tried the below and looked at the parsing, it looks like it should work..but it doesn't...here is my console log off of simple apiResponse

JSON is a *textual notation* for data exchange. [(More here.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. — T.J. Crowder, Sep 01 '19 at 09:48
Assuming you're dealing with objects/arrays, not JSON, it's `apiResponse[0].result[0][0]`: https://jsfiddle.net/tjcrowder/scfbt4oz/1/ See the linked question's answers for details. (If that doesn't work, you may be dealing with JSON -- that is, a string -- in which case, `JSON.parse` it first.) — T.J. Crowder, Sep 01 '19 at 09:49
I've just looked at the jfiddle, when I try it myself I get "Cannot read property of 'result' undefined" I don't get why I reads it ok up until apiResponse[0] and then has an issue. Is it not parsed correctly if it reads the beginning ok? — Lawrence Ferguson, Sep 01 '19 at 10:41

JSON array inside JSON array,,,

0 Answers0