Svelte: process JSON response of a post request with fetch()

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)

Don't try to build JSON by concatenating strings. Build a real JS data structure and then run it through JSON.stringify. — Quentin
– Quentin, Commented Dec 13, 2022 at 16:52
Have you tried not shadowing currentData? I would not recommend this in any case. E.g. use currentDataPromise and currentData instead. — brunnerh
– brunnerh, Commented Dec 13, 2022 at 17:04
@Quentin I tried it (see edit), however, it did not change anything. Thanks anyways — Jon Jampen
– Jon Jampen, Commented Dec 13, 2022 at 17:40
@H.B. Yes, I tried that. But it does not change anything. Thanks anyways — Jon Jampen
– Jon Jampen, Commented Dec 13, 2022 at 17:41

brunnerh · Accepted Answer · 2022-12-13 17:55:59Z

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

Collectives™ on Stack Overflow

Svelte: process JSON response of a post request with fetch()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related