DEV Community

Cover image for Display JSON results with VanJS
artydev
artydev

Posted on

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) 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)