Refreshing Each block

How-to Discussions
1

Hiya,

If I have created an Each block from data, is it possible to make it update with new data? I.e. to redraw all of the elements that it contains with their new values?

Thanks…!

2

Hi!

That should happen automatically if you’re using Observables. What does you code look like?

3

That would make sense; the problem I’m having is getting an Observable to work directly with an Each block;

This works:

<JavaScript>
var Observable = require("FuseJS/Observable");

var answerText = Observable("");
var currentQuestion = 0;

updateAnswers = function()
{
    answerText.value = questions[currentQuestion].answers;
}

getAnswers = function()
{
    return answerText.value;
}

updateAnswers();

module.exports = {
    getAnswers: getAnswers(),
    answerText: answerText
}

</JavaScript>

<Each Items="{getAnswers}">
<Text Font="typewr" FontSize="60" Alignment="Center" Value="{answer}" Padding="5,3" TextWrapping="Wrap" />
...
</Each>

Whereas if I replace the Each block with this, it does not:

<Each Items="{answerText}">
<Text Font="typewr" FontSize="60" Alignment="Center" Value="{answer}" Padding="5,3" TextWrapping="Wrap" />
...
</Each>

The data is sourced from a (pseudo) JSON file and it works perfectly with the getAnswers abstraction.

4

Interesting… if I create the answerText Observable with the values from the JSON, it works:

            var answerText = Observable(
                {"answer":"1901"},
                {"answer":"c. 150"},
                {"answer":"1940"},
                {"answer":"1840", "correct":"true"},
                {"answer":"1801"}            );

As it appears in the JSON file:

module.exports = [
        {
            "question":"In what year...",
            "answers":[
                {"answer":"1901"},
                {"answer":"c. 150"},
                {"answer":"1940"},
                {"answer":"1840", "correct":"true"},
                {"answer":"1801"}
            ]
        }
];

Perhaps I need to manipulate the JSON on the way into the Observable?

5

Right, got it…

.value is only for adding single values to an Observable, so what I needed was an array function. Thus my updateAnswers function should look like this:

  updateAnswers = function()
  {
      answerText.replaceAll(questions[currentQuestion].answers);
  }

That grabs the array of answers to the specified question from the JSON and adds it to the Observable in place of any existing value(s).

Thanks for the prod in the right direction :slight_smile:

6

I was fighting with the same thing all day and that “replaceAll” make my day, so I have to say thank you!!