Parsing JSON in React Native

Question

I am currently using Google Firebase Firestore as a REST API. I feel like I am missing something quite basic as I am having a difficult time displaying data. I would like the app to display all inventory or selected inventory. Thanks in advance!

The data returned through postman shows as:

{
    "documents": [
        {
            "name": "<my_url>",
            "fields": {
                "l": {
                    "integerValue": "5"
                },
                "s": {
                    "integerValue": "11"
                },
                "m": {
                    "integerValue": "15"
                },
                "xs": {
                    "integerValue": "4"
                },
                "xl": {
                    "integerValue": "4"
                },
                "ml": {
                    "integerValue": "13"
                }
            },
            "createTime": "2021-11-03T16:39:02.531749Z",
            "updateTime": "2021-11-03T16:43:31.538505Z"
        },
        {
            "name": "<my_url>",
            "fields": {
                "6": {
                    "integerValue": "5"
                },
                "5": {
                    "integerValue": "6"
                },
                "8": {
                    "integerValue": "5"
                },
                "7": {
                    "integerValue": "7"
                }
            },
            "createTime": "2021-11-03T16:39:08.991738Z",
            "updateTime": "2021-11-03T16:44:15.257036Z"
        },
        {
            "name": "<my_url>",
            "fields": {
                "s": {
                    "integerValue": "10"
                },
                "l": {
                    "integerValue": "7"
                },
                "xl": {
                    "integerValue": "6"
                },
                "m": {
                    "integerValue": "8"
                },
                "xxl": {
                    "integerValue": "1"
                },
                "xs": {
                    "integerValue": "2"
                }
            },
            "createTime": "2021-11-03T16:38:34.533204Z",
            "updateTime": "2021-11-03T16:45:51.907403Z"
        },
        {
            "name": "<my_url>",
            "fields": {
                "xxl": {
                    "integerValue": "1"
                },
                "l": {
                    "integerValue": "5"
                },
                "xl": {
                    "integerValue": "5"
                },
                "s": {
                    "integerValue": "8"
                },
                "xs": {
                    "integerValue": "1"
                },
                "m": {
                    "integerValue": "5"
                }
            },
            "createTime": "2021-11-03T16:39:45.818467Z",
            "updateTime": "2021-11-03T16:46:40.872011Z"
        }
    ]
}

I am fetching the data by:

const getAllInventory = async () => {
        const url = `https://firestore.googleapis.com/v1/projects/<my_url>`;
        const response = await fetch(url);
        const items = await response.json();

        console.log(response.ok);
        console.log(response.status);

        setInventoryArray([items]);
    };

I have attempted to:

• set state as Objects.entries(items) this allowed the following map to run without throwing an error but I have been unable to properly display the data
• {inventoryArray.map((object, i) => { <Text key={i}> test{object[0]}</Text>; })}

Any suggestions on how to properly display would be greatly appreciated!

Full view for further context:

import React from "react";
import { useState, useEffect } from "react";
import { Text, View, Button, StyleSheet } from "react-native";

const InventoryMain = (props) => {
    const [inventoryArray, setInventoryArray] = useState([]);

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

    useEffect(() => {
        console.log(inventoryArray);
    }, [inventoryArray]);

    const getAllInventory = async () => {
        const url = `https://firestore.googleapis.com/v1/projects/<my_url>`;
        const response = await fetch(url);
        const items = await response.json();

        console.log(response.ok);
        console.log(response.status);

        setInventoryArray(items);
    };

    if (inventoryArray.length === 0) {
        return <Text>loading...</Text>;
    }
    return (
        <View style={styles.container}>
            <Text>company wide inventory</Text>

            {inventoryArray.map((object, i) => {
                <Text key={i}> test{object[0]}</Text>;
            })}

            <Text></Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

export default InventoryMain;

Answer 1

I don't think I completely understand what you're trying to do, but there are a couple of things that look strange to me.

First of all, await response.json() should return the whole response body as a JavaScript Object, and according to your Postman capture, that would be an object with a single key documents instead of an array. Try doing setInventoryArray(items.documents);.

On the other hand, that kind of errors is easy to debug using a debugger or adding a console.log.

Also, if you try to convert a complex object to a string, I recommend using JSON.stringify(object).