Display JSON results with VanJS

This example show how easy it is to display a result from an API call with VanJS

Demo

import v from "./van.js"

const {span, h1, div, img } = v.tags

const add = (base) => (elt) => v.add(base, elt)

const target = document.getElementById("app")
const title = document.getElementById("title")

const style_user_pict = `
  border:1px solid orange;
  padding: 3px;
  margin:10px`;

function User (user) {
  return (   
      // User wrapper
      div ({style:"display:flex; align-items:center;width:90%;"},
        // User picture
        div({style:"margin-right:10px"},     
          img({style:style_user_pict, src:user.picture.thumbnail})
        ),
        // User name
        div (
          span(user.name.first, " "),         
          span(user.name.last)
        )
      )
    )
}

function toJson(r) {
  return r.json()
}

function displayUsers (users) {
   add(title)(div("Random Users API")) 
   users.results.map(user => add(target)(
      User(user))
   )  
}  

fetch("https://randomuser.me/api?results=5")
  .then(toJson)
  .then(displayUsers)