将随机 JSON 对传递给 aframe 组件

Question

编辑 3：代码现在可以跨多个对象工作（感谢 Noam），他还帮助让随机函数与它一起工作。一旦实现，我将更新问题中的代码。

编辑 2：我接受了@Noam Almosnino 的回答，现在正尝试将其应用于包含大量对象的数组（未成功）。这是Remix 链接。请帮忙！

编辑：我收到了一些反馈，发现this 页面讨论了使用 JSON.parse 函数。我已经编辑了代码以反映新的变化，但我仍然无法弄清楚到底缺少什么。

原文：我认为this 之前的答案有助于我尝试解析 json 文件并返回一个随机字符串及其相关对（例如 Title-Platform），但我无法让它工作。我的目标是将输出渲染为场景中的文本项。我真的很喜欢使用 A-frame，但很难找到可以在这方面帮助我的文档。我尝试使用以下修改后的脚本从 Json 文件中获取文本...

AFRAME.registerComponent('super', {  // Not working
schema: { 
Games: {type: 'array'}, 
jsonData: {
parse: JSON.parse,
stringify: JSON.stringify}
},
init: function () {
var el = this.el; 
el.setAttribute('super', 'jsonData', {src:"https://cdn.glitch.com/b031cbf1-dd2b-4a85-84d5-09fd0cb747ab%2Ftrivia.json?1514896425219"});
var hugeArray = ["Title", "Platform",...];   
const el.setAttribute('super', {Games: hugeArray}); 
el.setAttribute('position', {x:-2, y:2, z:-3}); 
} 
});

在我的 html 中也设置了触发器来呈现文本。我的代码正在通过 glitch.com 进行处理，我们将不胜感激！

Answer 1

要加载 json，我认为您需要使用 XMLHttpRequest（正如 Diego 在 cmets 中指出的那样），加载后，您可以通过 setAttribute 设置文本。

这是一个关于故障的基本示例： https://glitch.com/edit/#!/a-frame-json-to-text

在初始化时它会执行请求，然后在完成后将加载的 json 文本设置到实体上。

AFRAME.registerComponent('json-text-loader', {
  schema: {},
  init: function () {
    var textEntity = document.querySelector('#text');
    var url = 'json/text.json';

    var request = new XMLHttpRequest();
    request.open( 'GET', url, true );
    request.addEventListener( 'load', function ( event ) {

      var jsonText = JSON.parse( event.target.response )
      textEntity.setAttribute("value", jsonText.text)

    } );
    request.send( null );
  }
});

更新版本：https://glitch.com/edit/#!/peppermint-direction

AFRAME.registerComponent('json-text-loader', {
  schema: {},
  init: function () {
    var textEntity = document.querySelector('#text');
    var url = 'json/text.json';

    var request = new XMLHttpRequest();
    request.open( 'GET', url, true );
    request.addEventListener( 'load', function ( event ) {

      var games = JSON.parse( event.target.response ).games;

      // Get a random game from the list
      var randomGame = games[Math.floor(Math.random()*games.length)];

      // Get the next game if it's available
      var nextGame = null
      if (games.indexOf(randomGame) < games.length - 1) {
        nextGame = games[games.indexOf(randomGame) + 1]
      }

      // Build the string for the games
      var gameInfo = randomGame.Title + '\n' + randomGame.Developer + '\n\n'
      if (nextGame != null) {
        gameInfo += nextGame.Title + '\n' + nextGame.Developer + '\n'
      }

      textEntity.setAttribute("value", gameInfo);
      var sceneEl = document.querySelector('a-scene');
      sceneEl.querySelector('a-box').setAttribute('material', {src:"https://cdn.glitch.com/4e63fbc2-a1b0-4e38-b37a-9870b5594af8%2FResident%20Evil.jpg?1514826910998"}); 
    });
    request.send( null );
  }
});