Fetch JSON into a list

[shkhuz]

Sorry if this is a silly question, but I can't for the life of me figure out how to fetch items from an API and put them in a list with reactive behaviour.

Suppose I want to retrieve all todo items from https://jsonplaceholder.typicode.com/todos endpoint and once they are fetched, put them in an unordered list with each item's title wrapped in li.

I used this code:

const App = () => {
  const items = van.state([]);
  fetch('https://jsonplaceholder.typicode.com/todos')
    .then(response => response.json())
    .then(data => items.val = data);

  return div(
    ul(
      () => items.val.map(item => li(item.title))
    )
  );
};

van.add(document.body, App());

But this renders to:

[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],
...

But when I remove the lambda from the ul and put it in div:

  return div(
    () => ul(items.val.map(item => li(item.title)))
  );

It then works:

delectus aut autem
quis ut nam facilis et officia qui
fugiat veniam minus
et porro tempora

I know it is somewhat related to the spread operator, but I can't figure out how. I read that state changes should affect the smallest possible components, so putting the lambda in ul instead of div should in theory be better. But how can I achieve it?

Side note: In the official VanJS examples, the counter example does not use a binding function, but the counter still updates:

const Counter = () => {
  const counter = van.state(0)
  return span(
    "❤️ ", counter, " ",  // not wrapped in () =>
    button({onclick: () => ++counter.val}, "👍"),
    button({onclick: () => --counter.val}, "👎"),
  )
}

van.add(document.body, Counter())

But then I have to use it in my code for reactive behaviour. What gives?

[Tao-VanJS]

In VanJS, for state-derived child nodes, the binding function can't return an array of DOM nodes. They have to be encapsulated under a parent node - <ul> in your case. Sorry for the confusion. This is due to the limit of DOM API.

In the Counter example:

const Counter = () => {
  const counter = van.state(0)
  return span(
    "❤️ ", counter, " ",  // not wrapped in () =>
    button({onclick: () => ++counter.val}, "👍"),
    button({onclick: () => --counter.val}, "👎"),
  )
}

van.add(document.body, Counter())

counter can be considered as a syntax sugar for () => counter.val.

[shkhuz]

Thanks, got it. Somewhat unrelated to the previous query, I have to wrap a lot of my elements in divs to be correct, even if they are not array of elements. Otherwise they won't work. An example:

    return div(() => {
        if (error.val) return div("Error");
        else if (loading.val) return div("Loading...");
        else return div("Item: ", () => span(item.val?.name);
    });

Here I have to return a root div otherwise it just errors (page.then not found, possibly because I am using van-cone). I read in the docs that returning a function is ok, but can't seem to make it work. Also array of elements seem to work here:

    return div(() => error.val
        ? div("Error")
        : "Item: ", () => span(item.val?.name)); // is this an array of elements?

I was trying to accomplish returning different tags conditionally based on state. I can make it a "leaky" component but then it revaluates the entire component, which is not what I want. What would be the most efficient way to conditionally return different tags based on state, and not having to reevaluate the entire component?

[Tao-VanJS]

The return type of a binding function needs to be a DOM node. Returning another binding function won't work.