Svelte：使用 fetch() 处理发布请求的 JSON 响应

Question

I have a question regarding svelte and an API.

I want to make a request to an API and then return data[170] from my getCurrentData function. I want to display currentData[101] and currentData[102] in the svelte code. But this does not work and I get an error from svelte saying it failed to rerender. However, if I return data[170][101] from the function and then in the svelte code just write {currentData} (instead of currentData[101]) it works.

data[170] looks like this: image1

currentDataPromise = getCurrentData(request1, request2);


async function getCurrentData(request1, request2) {        
        const response = await fetch(url, {
            method: "POST",
            
            body: JSON.stringify({
                "801": {
                    "170": null
                }
            }),
            
            headers: {
                "Content-Type": "application/json; charset=utf-8",
                //other headers
            }
        });
        const json = await response.json();
        const data = json[801];

        if (data) {
            console.log(data[170]); //see image1
            return data[170];
        } else {
            throw new Error("No data available...");
        }
    };

{#await currentDataPromise}
     <p>Loading...</p>
{:then currentData}
    <p class="value">{currentData[101]} and {currentData[102]}</p>
{:catch error}
    <p class="error">{error.message}</p>
{/await}

Since I don't want to make an unnecessarily high amount of requests I'd really like to figure out why the first option isn't working. Any idea why this is not working?

Edit: using JSON format in body (but did not change anything)

Answer 1

There is probably something off with your data or how you read it. The error could also be in the code that you did not include.

The fact that you are using magic indices all over makes it highly likely that you end up reading the wrong value or end up a level off. Try to use named properties instead of just arrays for everything.

Here is an example that shows that the Svelte code works just fine if the data is there:

<script>
    let currentDataPromise = getCurrentData();
    async function getCurrentData() {
        const url = 'data:application/json,' + encodeURIComponent(JSON.stringify({
            [801]: {
                [170]: {
                    [101]: 'Value 101',
                    [102]: 'Value 102',
                }
            }
        }));
        const response = await fetch(url);
        const json = await response.json();
        const data = json[801];

        if (data) {
            return data[170];
        } else {
            throw new Error("No data available...");
        }
    };
</script>

{#await currentDataPromise}
     <p>Loading...</p>
{:then currentData}
    <p class="value">{currentData[101]} and {currentData[102]}</p>
{:catch error}
    <p class="error">{error.message}</p>
{/await}

REPL