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}, // ...]}

Answer 1

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>