Question

我做了一个A帧360视图。我从名为seat_perlis.json的JSON文件中提取数据。现在我想在场景中制作一系列面板。下面是我的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

}
});

及以下是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

链接是预期的结果 - ＆gt; [图像] [1]

现在JSON数据已经存在，但它直接上升了。我不知道如何打破它。

Answer 1

您为json数据中的每个条目创建一个新的布局实体，即您创建它：

public async Task ConsumeAsync<T>(CancellationToken cancellationToken)
{
 _logger.LogInformation("consume async");

 await Task.Delay(Timeout.Inifite, cancellationToken);

      _logger.LogInformation("cancelled");
}

你想要（如果我理解你的话）这样的东西而不总是生成一个新的布局实体：

<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>

因此，您应该将所有<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>个节点都应用到同一个a-text，而不是a-entity。

在旁注中，您为所有#jadah元素提供相同的ID！

从JSON数据在A帧中创建一个新行

1 个答案: