Création d'une nouvelle ligne dans une image A à partir des données JSON

Question

J'ai effectué une vue A-frame 360. Je tire des données à partir d'un fichier JSON appelé seat_perlis.json. Et maintenant je veux faire une série de panneaux dans la scène. Voici mon code jQuery.

<script> 
AFRAME.registerComponent ('jsonreader', 
{ 

init: function() 
{ 
var sceneEl = document.querySelector('a-scene'); 
var el = document.createElement('a-text'); 


$.getJSON("seat_perlis.json", function(response) { 

    console.log(response); 

    //push data to items 

    $.each(response.data, function(key, val) { 
     $('#jadah').append(`\ 
     <a-entity layout="type: box; margin: 1.6" scale="0.8 0.8" position="0 -1 -4">\ 
     <a-text value='${val.name} \n ${val.code_name} \n ${val.candidate_seats[0].candidate.name}' color="red" id="entity1-1"></a-text>\ 

     </a-entity>\ 
     `); 

    });//end each 

}); //end getJSON 

} 
}); 

et ci-dessous un exemple du fichier JSON

{ 
"data": [ 
    { 
     "id": 1, 
     "state_id": 1, 
     "name": "Titi Tinggi", 
     "code_name": "N1", 
     "type": "DUN", 
     "hot_seat": true, 
     "election_year": 2013, 
     "registered_voters": 9159, 
     "spoilt": 0, 
     "turnout": 7332, 
     "turnout_percent": 80, 
     "majority": 1486, 
     "majority_percent": 20, 
     "race_malay": 6734, 
     "race_chinese": 2128, 
     "race_india": 258, 
     "race_bumi": null, 
     "race_nonbumi": null, 
     "race_others": 54, 
     "state": { 
      "id": 1, 
      "name": "Perlis", 
      "code": "PER" 
     }, 
     "candidate_seats": [ 
      { 
       "id": 1, 
       "candidate_id": 2538, 
       "seat_id": 1, 
       "party_id": 1, 
       "verified_vote": 3925, 
       "unverified_vote": null, 
       "status": "WON", 
       "candidate": { 
        "id": 2538, 
        "name": "Khaw Hock Kong", 
        "image": null 
       } 
      }, 
      { 
       "id": 2, 
       "candidate_id": 2540, 
       "seat_id": 1, 
       "party_id": 100, 
       "verified_vote": 968, 
       "unverified_vote": null, 
       "status": null, 
       "candidate": { 
        "id": 2540, 
        "name": "Yaacob Bin Man", 
        "image": null 
       } 
      }, 
      { 
       "id": 3, 
       "candidate_id": 2539, 
       "seat_id": 1, 
       "party_id": 300, 
       "verified_vote": 2439, 
       "unverified_vote": null, 
       "status": "", 
       "candidate": { 
        "id": 2539, 
        "name": "Teh Seng Chuan", 
        "image": null 

lié est le résultat escompté -> [Image] [1]

maintenant les données JSON est mais il est allé tout droit. Je ne sais pas comment le casser.

Answer 1

Vous créez une nouvelle entité de mise en page pour chaque entrée dans vos données JSON, à savoir vous créez ceci:

<a-entity layout="type: box; margin: 1.6" scale="0.8 0.8" position="0 -1 -4"> 
    <a-text value="... entry 1 ..."></a-text> 
</a-entity> 
<a-entity layout="type: box; margin: 1.6" scale="0.8 0.8" position="0 -1 -4"> 
    <a-text value="... entry 2 ..."></a-text> 
</a-entity> 
<a-entity layout="type: box; margin: 1.6" scale="0.8 0.8" position="0 -1 -4"> 
    <a-text value="... entry 3 ..."></a-text> 
</a-entity> 

Vous voulez (si je comprends bien) quelque chose comme ceci sans générer toujours une nouvelle entité de mise en page :

<a-entity layout="type: box; margin: 1.6" scale="0.8 0.8" position="0 -1 -4"> 
    <a-text value="... entry 1 ..."></a-text> 
    <a-text value="... entry 2 ..."></a-text> 
    <a-text value="... entry 3 ..."></a-text> 
</a-entity> 

vous devez donc Apped tous les nœuds a-text au même a-entity, pas #jadah. Sur une note de côté, vous attribuez à tous les éléments a-text le même ID!