Nuxtstop

For all things nuxt.js

JSON in AssemblyScript

#webassembly #javascript #typescript #assemblyscript
17 0

Finally, AssemblyScript has a fully-functional JSON implementation. as-json implements full JSON compatibility that enables AssemblyScript to use JSON to communicate with APIs, store data, and more. In this article, I will introduce you to as-json and help you include it into your project.

Getting Started

as-json uses the same general API as the JavaScript JSON object. We can then use it just like JS. However, we must install and prep it first.

npm install json-as
Enter fullscreen mode Exit fullscreen mode 
--transform json-as/transform
Enter fullscreen mode Exit fullscreen mode

Installation complete. Lets use some JSON! 🔥

json-test.ts

import { JSON } from 'json-as'

// Create the Schemas
// @ts-ignore
@json
class JSONSchema {
  firstName: string;
  lastName: string;
  human: boolean;
  age: i32;
  meta: Meta;
  language: string;
  location: f64[];
}

// @ts-ignore
@json
class Meta {
  country: string;
  awesome: boolean;
}

// Create the JSON object
const data: JSONSchema = {
  firstName: 'Jairus',
  lastName: 'Tanaka',
  age: 14,
  human: true,
  meta: {
    country: 'US',
    awesome: true
  },
  language: 'english',
  location: [-43.130850291, 32.926401705]
};

// Now, encode and decode
const encoded: string = JSON.stringify(data)
console.log(`Encoded: ${encoded}`)
const decoded = JSON.parse<JSONSchema>(encoded)
console.log(`Decoded:`)
console.log(`{`);
console.log(` firstName: ${decoded.firstName},`);
console.log(` lastName: ${decoded.lastName},`);
console.log(` age: ${decoded.age},`);
console.log(` human: ${decoded.human},`);
console.log(` meta: {`);
console.log(`   country: ${decoded.meta.country},`);
console.log(`   awesome: ${decoded.meta.awesome}`);
console.log(` },`);
console.log(` language: ${decoded.language}`);
console.log(` location: [${decoded.location[0]}, ${decoded.location[1]}]`);
console.log(`}`);
Enter fullscreen mode Exit fullscreen mode

Note: If you are not running in WASI, use as-console instead.

So, json-as serialized and deserialized JSON. Lets see if it was correct.

json-test.ts

import { JSON } from 'json-as'

// Create the Schemas
// @ts-ignore
@json
class JSONSchema {
  firstName: string;
  lastName: string;
  human: boolean;
  age: i32;
  meta: Meta;
  language: string;
  location: f64[];
}

// @ts-ignore
@json
class Meta {
  country: string;
  awesome: boolean;
}

// Create the JSON object
const data: JSONSchema = {
  firstName: 'Jairus',
  lastName: 'Tanaka',
  age: 14,
  human: true,
  meta: {
    country: 'US',
    awesome: true
  },
  language: 'english',
  location: [-43.130850291, 32.926401705]
};

// Now, encode and decode
const encoded: string = JSON.stringify(data)
const decoded = JSON.parse<JSONSchema>(encoded)
// We perform an equality check
if (encoded == JSON.stringify(decoded)) {
  console.log('Yay! JSON-AS works! 😄')
} else {
  console.log('Oof. JSON-AS died.😖')
}
Enter fullscreen mode Exit fullscreen mode

Yay! JSON is now working for AssemblyScript. Go ahead and mess around with it and let me know what you make.
With the up-and-coming release of JSON-AS v0.2.0, full dynamic objects and arrays will be supported.
NPM: https://www.npmjs.com/package/json-as
GitHub: https://github.com/aspkg/as-json
Thanks for reading 😁

Add comment