Question 53494 in Javascript Question posted in
A very good W3school tutorial can be found here.

Svelte: Not updating #each when variable changes? – Javascript

I’m trying to display (and update live) my application logs so I can watch them via the web. The issue is, when I call updateLogs() it doesn’t re-render the each, it never does, even when calling updateLogs() in mount for the first time.

Each loop:

{#each application.logs as log }
    <p>{log}</p>
{/each}

updateLogs:

function updateLogs() {
    axios.get('http://localhost:5000/applications/' + application.Id + '/logs')
        .then(function (response) {
            application.logs = response.data;
        })
        .catch(function (error) {
            console.log(error);
        });
}

Declaration:

let application = {
    logs: []
};
Tags:

3

Answers


  1. 0

    I’m thinking of 3 ways you can achieve this.

    1. Use the reactive $: instead of let to declare application
    $: application = {
    logs: []
};
    1. Use the key block to watch and re-render the child block (#each) every time the watched variable changes; in this example (application.logs).
    {#key application.logs}
{#each application.logs as log}
<p>{log}</p>
{/each}
{/key}
    1. Declare application.logs again just to confirm, works sometimes… I don’t know how and why..
    function updateLogs() {
    axios.get('http://localhost:5000/applications/' + application.Id + '/logs')
        .then(function (response) {
            application.logs = response.data;
             application.logs =  application.logs //****Added Line
        })
        .catch(function (error) {
            console.log(error);
        });
}
    Login or Signup to reply.
  2. 0

    Update your updateLogs() function to this:

    function updateLogs() {
  axios.get('http://localhost:5000/applications/' + application.Id + '/logs')
    .then(function (response) {
        // Reassigning application with the updated data using ES6 spread syntax 
        application = {...application, logs: response.data};
    })
    .catch(function (error) {
        console.log(error);
    });
 }

    Svelte doesn’t consider application.logs = response.data as a reactive assignment. You can either update the object and then reassign it to itself or use the ES6 spread syntax like I did. You can learn more about it here.

    Thanks!

    Login or Signup to reply.
  3. 0

    Since the assignment was mentioned three times

    application.logs = response.data

    is one and there’s no problem with that here but probably with the response / returned data

    REPL

    <script>
    let application = {
        logs: []
    };

    async function fetchLogs() {
        return {data: ['log']}
    }

    function updateLogs() {
        fetchLogs()
            .then(function (response) {
            application.logs = response.data;
        })
            .catch(function (error) {
            console.log(error);
        });
    }
</script>

<button on:click={updateLogs}>
    updateLogs
</button>

{#each application.logs as log }
<p>{log}</p>
{/each}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search