VanJS : Revisiting displaying JSON
Tags: vanjs
Published: 2023-06-05 09:18:12

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](https://flems.io/#0=N4IgtglgJlA2CmIBcAWATAOgBwDYA0IAxgPYB2AzsQskVbAIYAO58UIB5hATncgNoAGPAIC6BAGYQE5fqFL0wiJCAwALAC5hY7WqXXw9NADqkAPOPjrCqgLQBXFlwAEUeuvo3SdsAF4jIAFZ-AD4TJydTeidVLnhxPxANdWYkAHpUrnpSKGIwB3guDEVUpghUkJMw8OqAJSycsCcAVUdyStJw0xLQs1SLK1t8rh72nRYEQnUIMhllAEYBJAEQAF88OQUlEAA3LIwAKxkCEj0DdRp0pwBBO3ViGyvGRgMoJws3O1inEwR1JwB9ABG9BYeAB5HchAA1k4fE4+CIANzVJyXADKkJh4mIzghOIgpAA5gDgSwnIxiOQIFMZu1Liw-lFSPAAO5OUnwCkEv7Y5xMZ7ZMHkejbeDk2LbaYOJxkdkg+AY+jQkziOykSbTDqA+CEgkACgAkgARACUTmAVX+EKVUIwjAcqj1QPlJsR6JFYqorw5VXSEHETid1uhGAQRPUqicwScCwEZojPDZzLZAFEuDwuHr-P5XZaObDA+oAJ7PYgBw2m2E+OEAcghXAJhJrZoA-C5iIRvGcMITLCmEIo9AAhIsGqAVs1IJzGqqxdSfDrOlgmFYmS6xPFfBgQuWgpyEPRTwj0WCwJx5WBTRgIJxTRRtUiq9U0jovPUHv5wuZmi0dJz+wMPyjGMzTfICbBA2dLAXQMlzFOErUxO1iEYPUTTNap13gTdPVgV5gyhFc6VSJwABVVAgcg3ikMUTipCEzlgIsnHyKiAANfjYpwoXgIsWRxV4CQY+hXjLJw2Lo9QuN5JxYigOxCEbW9VDFQE1TgMUqQAL3gDBiOuWAIBBJTKEUdk7CkKYOnIIswEBKgqLuWTWAUsUI1U9Sb203SfksJwAHlAX2AtAv2eBJjBf51LiAlWDBRgeDufyAzhULwvUHtLAABUS4hi2eZL2l+JwRKgK5sjRawXIQfzSAAMQgLgdzhPUGSFMEn0IMEWXoakAFlyDNHwenCVq-JbNsxvUUiIEUYhbj1Trut69QBpNMFkycNFLHQjBStak0ir86wsl7KBFX0B9fL+a19ByvLiALX9wl7P5-F2WB-DQ81nPnLgOgjSiMH+D6nDWdpwgZb4dhPL7th-KpwkuK5DOMolxMB8guKcuTXOUjzsi8iAdL0v9wmKqi4UxsFOy4AA1AtyGBj7Ef-ctticABCat90+OmEbJ6oANajAvTpk8qzhWn+dZlETqJVgLuwgtSvK86qvkmr6saiF31UU7FfcS72pYxhXH0I1ckG2WnHgWAyWFjnqzhJmxZPQ7Bbl-WFfOo3sIwKA7cseADptpmQYluFtjD0NKP0ZkmowXkUyVR0z2GpxYD1bYab59DWdXP9wdIKp-DIZMvtgH9lKBwyGITpn7XINOzWLwu1xI274HupzKJK8kGAJGUgvS5TpQSh7ktav2e+IM0+-2Bw-jSyY7Vy-KfNIS4J6S8Rp7cbvcvnqj4AARwsj6zlvR6d+IKfgBWM01Juj0qLmdki30f8AZU88CWJ1g5lCab2KsQIKs8Cy3ynl3WeHtrpOC7gWf+6hxbp2jHqZ6AJ-i33+P8KcMDcp4EtB9KcyDUFEL-G7WApDSDUnIVUQEBIoCNnIFOBEFDyZxwMAUVh8IxArjgaQYqdxLaNCjrCaM2wMCkGIIHUiJYxRtg5lOTapF4AAA91DZ0EcVUqBY9QNDBBgYx1gpBQFiKQIa6CqimLwhYpODAtEGkfMgosJok44hTtYPWZiJHtjAHtJ4LwADCFE8JZkFlAvetioBDR5gQh6Tg2yMOyD4vCYInaSMnNfURaTYnoQ4f4nRfl3CEkpk4Ta911FFj1HqeQigjHGPoFwMpVjzRVGKnwCezBGkYBiRYkQkDcpT2aWUwQgyJpODjJLYe+wIFtlGVRNhD9emLJEB0vyDQCw5E7IODK3B4AH37PAPZdTNge3CDJPUnSoQZMGWJUKGAzgNmwnqbpg0BYogppYfQzg4QND4FCQZ3MELRUkMyV4Si-EAqBQWZRThMn+IwAyK46h1ANmfiHW5CKLlC3LFE7RMyEl3Cfkw7OGS-FTV+dosEDR86Cztg7fFwy97wxmWAuZR92RkuMRgbYfB-CB2YP4MQgZeVCsGpShk1L+X+HECKvU4rOQfNpbkelKJGWaR+QUbRVRC7kz8n8kqMADG5F6f0gwuLhZwTNPtOCYIuBmkuPQW49xHgCigGCAC+YZF-BOYwYsUE-odC4CuMEwBXpTj1KUja5y-GlIwCk8cUVsgxQhbGxQJpH5HR5JZAoQ4mEsMZn4pmSai0u0TYWokTNJCXh1YCPxgIA65BbBgSiwTy7pVYMUv4dgzYH1EeU76GdMHFXlmdJW5ArjpnoMxOEfBeXjsNgfcg6y-xLt9iugsKbA7gtYFUK5xUG1iU2ttLRG7J3TsyEWBxbg+pMEWnmrgBbsgsPQp86oxVgD-AlaqsAKwCyAlZsVZMojANJzVIQRVxif3KqKA+14GcoDM3dn+3psHmDwdQoh6MyGqHqrxYGUDuQuY8zpTbYWxHGjcwBGC2KsSbbhAaBgWI14lTwAAOrUkdE2rZVNiC5Ko+hZEmqkWxDAMQUUaEwS8ZI6C1Ne6oB6oPTiQMFMZQBgvX7KdM63EINFnhVBjMUOfVIO3IRfky1EgAOKEGCUWQgCBnEDQLLGAQ8Cu7kFIsQWzObuXZH0Uq5gbTR1+U6tsuDFJUK4uKhuOwl4CydWgwHODYAEPQpMwR4WcWEs8x3Wm7tv0YIIg2X8KzxI4TfolVOX9-ipwiNyHqHL6h1pvEg-qt4qnrl+SomJCVH7Ibae87ZlWMA1aVRUpreAtUGpNS0Z54bXUEGFJRMO9BC2fOEA8VwLxjpa2-Jfcw6trWNsjfk7u+j60bblds-Zxz8BnPW0FqWqtZS7QOj1OV3FHW5wwXK82sARES7MnURSLgfxd0uoS8AUqYJSnkCFH7GTTCZM6gJGCF4hcxhBw1DMGgcwCdLFWOsEA9StgHCOLoeO5xlCzTB38XYHRxA8EaP4DAqRGcU+zMDySP1mE53MmisgQpGBZDBP4IYNhjxcCU8gZojhgnNM9f+MAxIANRz2PDkwvPgC20FOyNHHR1cIqyO0XngJ+f6LadqXUpADEQG2GhXM6oZhlfUB0OEz87jA5VJBl8ThFcy71EMD9vxWYRm8ICeQUgCxDDtBASYnxdIR7stH2AK2WKOH+GT2PjhpGbCTjrdQGehj-BOb1dOmeChPLS1IEvWfFLFlz9X2AHY3Caj6dSIsiIIaZz8qX6XiGDe271C0AogfxwEaRiRaAZwu+s35xg-c25eE1ln3oGsYMM-hFmoSJf5AuCEHq6oSPaewZXc9i4B3+-iwICnDWfQmibAnggISUgSBCBnAKJv4uKIUSl7JxtlxXCGANRBIlKg3AfBREX110cxBFXwgOwnIB-23yv0d1L3LykAvz-zQODwby72wOqAuVZkBHd0DBtkwRwLIEcwTyhCjTaRPAKC0TYgAAkiwwQDQSpGgAASYAAAzYFYNiQglENYaGNg7nFEQRcIN8XFX7f6KvLgf4QfIHX3Z8TUeXHhPAnhD9OiKgXSVvPfIYJ7cIOQjoIwrDPUCfD2czOA8gKiOqSwawMfZwDReOKAKiFg0iPqAAGWOT2XaT-BBCLHVH3E7UmFYEV1PGBGhG+koL7z+C8DyFaALAADlI8dVMYA43B5QMpEjQDipDJSAYQqYKImZz4CgixtoJg7hMx-B6Acwe9BZYsz4VYepqQ3hHDHQ2JeDCjbQYg4gVgWxmtyAfBeDEijDBD8jDVsJGBWiVpnJT4KcyA0JWZOd9pqYNCmomsZiWNsJ4t1APllMzMzcl5cg-CzgmYLtmQswQB+hrB7BHB-AwQHCBhnDXRsdqjNRZgQA0AcAkA0A5hicNhFAaA+k7CdAThqcaB7IoBmI4joioRCQeB1IpxVByAs40AABmIQJwAIHAAAUjBAAE58TndzNJdB8AimNKI2MiwpxxAEB1FGjwh7IZcCgpw0BGB1EEEqBoBM5X8NAkTeJmTyRSpGwpwFguSRS0sWkCQbB7IhcwAOSBApSqgWRoAIxUAAgVSmSqgZTbcpwBASpXVpTRk5SFS7glSnA0AdSRSX838bBqQTlWFP9TguARTCQmBlTVS-xWTA4uAbBMhmEHApwcAfTwgSBW8uApwWQKJ9ARSESkT5pshUT0S9QsScS8TCTcSAhSTGjyTHApclcVdiRME-SChAyRIIAQzcSBB8SRSVIBT1ApxtTwynB1SoAIwnAWzbTS5jjgcKTiyWTbhvcqSWSbQkyUTog0yMywQsywQ0BczndqhyzoyKkyB4ARTQioykBYynStzRcYBxSYxeyyZVzKzgzeFtT6zEZaZKBoyuQ3StyVDHxOiHiCh+5MFmFyBaSkBARW9oRTTZTSB5S8pLTvTdS-xH91Bn9DI38P8v93SVM9AbBvIpxMTOTILzM9oYBICxzvzfy3hGSRSGSNEbBmFYhcd39tzvBSAPSvTcS2zDyjtCQIKRSOzNSnAiS6yEyJzkSUzpyMTsS5yCSwQUAlytzzygzqzeEwysL2g21A49AxyOLVAkAAB2HUlcD49KL4mgNAdSpAbE1YMQUnTYGgGoTkBgT-bwgkKEGwF4pwxwcWUgAAKTRFWCAA)

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

```js
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);  
```