JSONファイルから最後のインデックスを除くすべてのインデックスを取得できますか？

Question

私は特定の期間の特定の投稿に関する情報を追跡するRedditボットを作成しました。そのデータをChart.jsというライブラリにマッピングしています。

情報はJSONファイルに保存されます。 2つの投稿を含むファイルの例を次に示します。

[ 
    {"time_scraped": ["2017-04-24 19:12:30", "2017-04-24 19:13:01", "2017-04-24 19:13:23"], 
    "title": "Le Pen 'steps aside' as party leader", 
    "downvotes": 0.0, 
    "subreddit": "news", 
    "post_id": "67b8ex", 
    "vote": "up", 
    "upvotes": [2.0, 2.0, 2.0, 2.0, 2.0]}, 

    {"time_scraped": ["2017-04-24 19:12:30", "2017-04-24 19:13:01", "2017-04-24 19:13:23"], 
    "title": "10 Astronomical Events That Will Happen In Your Lifetime", 
    "downvotes": 0.0, 
    "subreddit": "videos", 
    "post_id": "67b89w", 
    "vote": "up", 
    "upvotes": [2.0]} 
] 

かなり標準的なJSON設定です！

今、私はこのJSONファイルからデータを取り出してDOMに入力するために、少しjQueryを使用しています。ほとんどのオプション設定を、私は示すことができた - Create a graph...セクションでは、単になど、グラフの種類に関するいくつかのデータを保持しているポイントの配置

$.getJSON("./graph.json", function(json) { 
    var list = []; 
    var obj; 
    for (var i=0; i<json.length; i++) { 
     obj = json[i] 
     var name = "dataChart" + obj.post_id; 
     var containerName = "graphContainer" + obj.post_id; 
     $(".graphs").append("<div id='"+containerName+"'></div>"); 
     containerName = "#"+containerName; 
     $(containerName).append("<canvas id='"+name+"'></canvas>"); 
     var ctx = document.getElementById(name); 
     var dataChart = new Chart(ctx, { 
      /* 
       Create a graph... 
      */ 
     }); 
    } 
}); 

：のようにこのコード、マイナス1は、グラフを作成する部分は、見えます必要なら。私はこのスレッドにとって重要ではないと思います。

問題はjQueryコードで発生します。最後の投稿までは順調に進んでいきます。例えば、上の2つの投稿のうち、最初のもののためにコンテナdivとcanvasが作成され、うまく表示されます。ただし、最後の配列に到達するたびに、コンテナdivが作成されますが、その内部にはcanvasは作成されません。これは任意の数のグラフの場合に当てはまります。メインのJSON配列の中に投稿データを含む配列が20個ある場合は、コンテナdivが20個、唯一19 canvasが作成されます。

データを間違ってループしていますか？

多分それは早すぎる私にとってはまだですが、それは最後のインデックスが表示されていない、なぜ私は私の人生のために把握することはできません。

Answer 1

ここで、配列を反復処理し、各項目に複数の要素を追加する方法の簡単な例です

const data = [1, 2, 3, 4, 5] 
 

 
const $graphs = $(".graphs"); 
 

 
data.forEach(d => { 
 
    const $container = $(`<div class="container" id="${d}"><div class="canvas" id="${d}">I'm the ${d} canvas</div></div>`) 
 

 
    $graphs.append($container) 
 
})

.container { 
 
    background: orange; 
 
    padding: 5px; 
 
    margin: 10px; 
 
} 
 
.canvas { 
 
    background: lightgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="graphs" />

Answer 2

あなたの既存のコードには、少なくとも、すべてのdivの内側にキャンバスを作成するように見えるんJSONが提供されています（Chart.jsが何とかしていないと仮定します）。

作成している要素を文書に配置するのではなく、ただちに再度参照することで、DOMトラバーサル（および不要な要素IDの可能性がある）を自分で節約することができますそのIDによって：

var theJSON = [{ 
 
    "time_scraped": ["2017-04-24 19:12:30", "2017-04-24 19:13:01", "2017-04-24 19:13:23"], 
 
    "title": "Le Pen 'steps aside' as party leader", 
 
    "downvotes": 0.0, 
 
    "subreddit": "news", 
 
    "post_id": "67b8ex", 
 
    "vote": "up", 
 
    "upvotes": [2.0, 2.0, 2.0, 2.0, 2.0] 
 
    }, 
 

 
    { 
 
    "time_scraped": ["2017-04-24 19:12:30", "2017-04-24 19:13:01", "2017-04-24 19:13:23"], 
 
    "title": "10 Astronomical Events That Will Happen In Your Lifetime", 
 
    "downvotes": 0.0, 
 
    "subreddit": "videos", 
 
    "post_id": "67b89w", 
 
    "vote": "up", 
 
    "upvotes": [2.0] 
 
    } 
 
]; 
 

 
//inlining the JSON for demo: 
 
var theFunction = function(json) { 
 
    for (var i = 0; i < json.length; i++) { 
 
    // "container" contains the DOM node to be appended to .graphs: 
 
    var container = $("<div id='graphContainer" + json[i].post_id + "'></div>") 
 
     .appendTo($(".graphs")); 
 
    // Now ctx can be appended directly to container, without a DOM lookup: 
 
    var ctx = $("<canvas id='dataChart" + json[i].post_id + "'></canvas>") 
 
     .appendTo(container); 
 
    // and your chart can work directly with ctx, again with no DOM lookup required: 
 
    /* 
 
    var dataChart = new Chart(ctx, { ... }); 
 
    */ 
 
    } 
 
}; 
 

 
theFunction(theJSON);

/* Borders added so you can see what it's doing */ 
 
div { 
 
    border: 2px solid #000 
 
} 
 

 
canvas { 
 
    border: 2px solid #F00 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="graphs"></div>