$。每個都有一個項目比循環

我試圖通過php從一個MySQL數據庫中獲取數據，將其編碼爲JSON，然後將其解析爲一個數組，顯示條形圖中的數據。

如果我明確聲明的值，例如：

var data = new Array(); 
data.push ([[5,66],[6,65],[7,68],[8,67],[9,64],[10,68],[11,73],[12,66],[13,70],[14,72],[15,74],[16,75],[17,67],[18,67],[19,39],[20,25]]);

這工作。

如果我創建一個循環，例如：

var data = new Array(); 
var namespacedata = []; 
for (var j=5; j<20; j++) { 
    namespacedata.push([j,66]); 
} 
data.push(namespacedata);

這也適用。

如果我使用Chrome的控制檯與一些記錄一起，我可以看到正在傳遞的數組是15元長：

然而，當我嘗試解析的json數組，它看起來像這來自php：

[{「NAMESPACE」：「5」，「used」：「66」}，{「NAMESPACE」：「6」，「used」：「64」}，{「 NAMESPACE 「：」 7" ，「使用」：「使用9 」「：使用的8 」「68」}，{ 「NAMESPACE」「」：「67」}，{ 「NAMESPACE」「」：「64」 }，{ 「NAMESPACE」：「使用」，「11」，...... 「使用」，「10」，「67」}，{ 「NAMESPACE」「72」}，{ 「NAMESPACE」：「12」，「使用」：「67」}，{「NAMESP ACE 「：」 13" ，「使用」：「70」}，{ 「NAMESPACE使用15 」「：使用14 」「」「」：「71」}，{ 「NAMESPACE」「」：「74」 }，{ 「NAMESPACE」：「使用」，「17」，...... 「使用」，「16」，「74」}，{ 「NAMESPACE」「67」}，{ 「NAMESPACE」：「18」，「使用」：「使用」，「19」，...... 「70」}，{ 「NAMESPACE」，「41」}，{ 「NAMESPACE」：「使用」，「20」，「25」}]

使用此代碼：

var data = new Array(); 
var namespacedata = []; 
$.getJSON("resources/get_namespace_usage.php", function(result) { 
    $.each(result, function(i, item) { 
     namespacedata.push([Number(item.NAMESPACE),Number(item.used)]); 
    }); 

    console.log(namespacedata); 
    data.push(namespacedata); 
    console.log(data); 
});

我得到一個16元件陣列，並且圖不起作用

據我所知，一切看起來都應該如果我檢查控制檯內的二維數組，數據看起來是正確的，但我不明白爲什麼我得到一個額外的元素，爲什麼圖不會沒有工作。我嘗試拼接數組，這是行不通的。我想我可以做一個for循環給定一個固定的數字（j = 5; j < 20; j ++），但是，這三個實現之間有什麼根本的不同？這不能很好地擴展，並且會比獲得$ .each工作更加混亂。

在此先感謝！

編輯：全bar.js文件：

$(function() { 
    var data = new Array(); 
    var ds = new Array(); 
    var namespacedata = []; 

    $.getJSON("resources/get_namespace_usage.php", function(result) { 
     $.each(result, function(i, item) { 
      namespacedata.push([Number(item.NAMESPACE),Number(item.used)]); 
     }); 
     data.push(namespacedata); 
     console.log(data); 
    }); 

    for (var i=0, j=data.length; i<j; i++) { 

     ds.push({ 
      data:data[i], 
      grid:{ 
       hoverable:false 
      }, 
      bars: { 
       show: true, 
       barWidth: 0.8, 
       order: 1, 
       align: "center", 
       lineWidth: 0.5, 
       fillColor: { colors: [ { opacity: 0.75 }, { opacity: 1 } ] } 
      } 
     }); 
    } 

    var somePlot = $.plot($("#bar-chart"), ds, { 
     colors: ["#F90"], 
     yaxis: { 
      min: 0, 
      max: 100, 
     }, 
     xaxis: { 
      ticks: [[5,"NS5"],[6,"NS6"],[7,"NS7"],[8,"NS8"],[9,"NS9"],[10,"NS10"],[11,"NS11"],[12,"NS12"],[13,"NS13"],[14,"NS14"],[15,"NS15"],[16,"NS16"],[17,"NS17"],[18,"NS18"],[19,"D2C"],[20,"BPN"]] 
     } 
    }); 

    var ctx = somePlot.getCanvas().getContext("2d"); // get the context 
    var data = somePlot.getData()[0].data; // get your series data 
    var xaxis = somePlot.getXAxes()[0]; // xAxis 
    var yaxis = somePlot.getYAxes()[0]; // yAxis 
    var offset = somePlot.getPlotOffset(); // plots offset 
    ctx.font = "14px 'Segoe UI'"; // set a pretty label font 
    ctx.fillStyle = "black"; 
    for (var i = 0; i < data.length; i++){ 
     var text = data[i][1] + ''; 
     var metrics = ctx.measureText(text); 
     var xPos = (xaxis.p2c(data[i][0])+offset.left) - metrics.width/2; // place it in the middle of the bar 
     var yPos = yaxis.p2c(data[i][1]) + offset.top + 13; // place at top of bar, slightly up 
     ctx.fillText(text, xPos, yPos); 
    } 
});

來源

2016-03-03 Evan R.

你發佈爲「來自PHP」的數組有16個條目。 – Pointy

請注意，您的循環條件爲「j <20」，而不是「j <= 20」。 – Pointy

你什麼時候調用繪製數據的函數？您需要在'$ .getJSON'回調中執行該操作，否則您將在響應出現之前繪製數據。 – Barmar

這不是與$.each問題。檢查來自PHP的響應。

在$.each之前加上console.log(result)。

此外，請注意Array#push將其參數添加到數組中。所以行data.push(namespacedata);將添加一個項目到data包含16個元素。如果你想追加16個項目到data，那麼你應該看看Array#concat

來源

2016-03-03 00:51:51 matpie

他使用的圖形庫顯然希望數據是一個子數組，因此data.push（namespacedata）是正確的。它在早期的例子中起作用。 – Barmar

啊，那麼就忽略我最後一段。謝謝！ – matpie

$。每個都有一個項目比循環

回答

相關問題