Cannot render a value from a Float32Array

Question

I am trying to render an element from a Float32Array using Svelte.

let laterTimeIndex = hourlyWeatherData.time
    .find((timeData: Date) =>
        timeData.getHours() === (currentTime + 5) % 24
    );
let laterTemperature = hourlyWeatherData.temperature_2m[
    hourlyWeatherData.time.indexOf(laterTimeIndex)
];
$inspect(laterTimeIndex);
$inspect(laterTemperature);

<div class="weather">
    <div class="weather-card weather-now">
        <p>Weather Now: {currentPeriod}, {currentWeatherData.temperature_2m}</p>
    </div>

    <div class="weather-card weather-later">
        <p>Weather Later: {laterPeriod}, {laterTemperature}</p>
    </div>
</div>

For context, hourlyWeatherData is a prop that contains multiple Float32Array. The arrays are return results of an API. Array temperature_2m was one of the Float32Array.

I was able to get the value when I used $inspect rune but cannot get the value to render on the browser like shown below

What could be the issue and are there workarounds I can try to get around the issue?

brunnerh · Accepted Answer · 2025-11-11 09:19:00Z

2

If the prop can change (i.e. data from the API is assigned later), you probably have to wrap your values in $derived.

The fact that the data is a Float32Array does not matter for display purposes, you can test this by just adding {new Float32Array(1)[0]} in the template, it shows the default value 0.

If you are modifying the array (e.g. assigning specific indices), you will not get updates because the data structure itself is not reactive. You would have to assign a new instance instead.

answered Nov 11 at 9:19

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kapricorn · Accepted Answer · 2025-11-11 10:00:33Z

-1

The value isn’t rendered because the Float32Array isn’t reactive in Svelte when mutated. You must assign a new instance (or use $derived) so Svelte detects the change and updates the display.

answered Nov 11 at 10:00

Kapricorn

11 bronze badge

Comments

Krinz · Accepted Answer · 2025-11-12 04:53:58Z

-1

While trying and debugging the suggested answer, I noticed that the value I was inspecting was rendered for a split second before disappearing. This means I was able to get the value from Float32Array but was not followed to the browser.

I called the API within a PageServerLoad load function at the time. Once I moved the API call to Load load function, I was able to render the value I was trying to get. I think the API return only run "server-side" and not being followed through the client (hydration)

answered Nov 12 at 4:53

Krinz

211 silver badge4 bronze badges

2 Comments

Community Nov 12 at 5:32

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

brunnerh Nov 12 at 8:20

The data should transfer correctly from a server load function. If it disappears on client-side render, there might be some other issue that causes a hydration error, e.g. incorrectly nested elements that lead to a different DOM structure when the browser parses it.

Collectives™ on Stack Overflow

Cannot render a value from a Float32Array

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related