How to load JSON data into an A-Frame component?

Question

What's the best way to load a custom JSON file as data into an A-frame component ? For example, the JSON file may contain coordinates of points. I want to load the file as an asset and use the parsed json object in the component.

{"coordinates": [{"x": 0, "y": 1, "z": 2}, // ...]}

score 4 · Accepted Answer · answered Jan 09 '17 at 10:13

You can define your own property type in the schema that parses data how you wish.

To parse JSON from a component, create a parse function that does a JSON.parse:

AFRAME.registerComponent('foo', {
  schema: {
    jsonData: {
      parse: JSON.parse,
      stringify: JSON.stringify
    }
  }
});

Then use the component:

el.setAttribute('foo', 'jsonData', yourJsonData);

Or:

<a-entity foo='jsonData: {"coordinates": [{"x": 0, "y": 1, "z": 2}]}'></a-entity>

score 2 · Answer 2 · answered Jan 09 '17 at 10:20

Another way is to set your component to have no schema so it just takes an object. There is no API to have a "wildcard" schema yet, but one way is to have a property type that parses the inline-CSS-like string with the styleParser:

AFRAME.registerComponent('foo', {
  schema: {
    parse: AFRAME.utils.styleParser.parse
  }
});

The above component is a single-property schema, so whatever object we pass will become the value of this.data:

el.setAttribute('foo', {bar: 'baz', qux: 'qaz', whateverWeWant: true});

Or:

<a-entity foo="bar: baz; qux: qaz: whateverWeWant: true"></a-entity>

How to load JSON data into an A-Frame component?

2 Answers2

Linked