Name: VanJS : Revisiting displaying JSON
Rating: 2.2 (8510 reviews)
Author: artydev

VanJS : Revisiting displaying JSON

artydev - Jun 5 '23 -

- Dev Community

Beware, the 'autoappend' functionality from Eckehard is in pull-requests in github repository.

So let's see how we can rewrite our previous example.

You can easily see that the code is plain vanilla JS.
There is no templates, JSX, directives.

All the code execute directly in Browser, whitout any ceremony.

Demo

<fetch-user data-num="5">
  <a href="https://randomuser.me/api/">Random Users</a>
</fetch-user>

import van from "./van.js"

const { div, button, span, "user-card": UserCard, img } = van.tags
const { end, begin } = van

const bdiv = () => begin(div());
const btn = button

function Card(user) {
  let
    thumbnail = user.picture.thumbnail,
    user_name = user.name.first,
    user_email = user.email,
    user_city = user.location.city;

  let user_card = begin(UserCard())
    // identity
    div({ class: 'ident' },
      img({ src: thumbnail }),
      div({ style: 'text-align:center' },
        user_name
      )
    )
    // address
    div({ class: 'address' },
      div(user_email),
      div(user_city),
    )

    btn (
      {
        onclick: () => alert(`Hy, I am ${user_name}`),
      }, "Hy"
    )

  end()
  return user_card
}

function Users(users) {
  console.log(users)
  return users.map(Card)
}

class FetchUser extends HTMLElement {
  async connectedCallback() {
    let numusers = Number(this.dataset.num)
    let link = this.querySelector("a");
    let req = await fetch(`${link.href}?results=${numusers}`)
    let resp = await req.json()
    van.add(this, Users(resp.results))
  }
}

customElements.define("fetch-user", FetchUser);