Pass a random JSON pair into an aframe component

Question

Edit 3: The code is now working across numerous objects (thanks to Noam) and he has also helped in getting the random function working alongside it. I'll update the code in the question once its implemented.

Edit 2: I've taken @Noam Almosnino's answer and am now trying to apply it to an Array with numerous objects (unsuccessfully). Here's the Remix link. Please help!

Edit: I've taken some feedback and found this page which talks about using a JSON.parse function. I've edited the code to reflect the new changes but I still can't figure out exactly whats missing.

Original: I thought this previous answer would help in my attempt to parse a json file and return a random string and its related pair (e.g Title-Platform), but I couldn't get it to work. My goal is to render the output as a text item in my scene. I've really enjoyed working with A-frame but am having a hard time finding documentation that can help me in this regard. I tried using the following modified script to get text from the Json file...

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}); 
} 
});

The triggers are also set up in my html to render the text. My code is being worked on through glitch.com, any help will be much appreciated!

Answer 1

To load the json, I think you need to use an XMLHttpRequest (as Diego pointed out in the comments), when that's loaded, you can set the text through setAttribute.

Here's a basic example on glitch: https://glitch.com/edit/#!/a-frame-json-to-text

On init it does the request, then when done, it set's the loaded json text onto the entity.

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 );
  }
});

Updated version: 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 );
  }
});