$ .each имеет еще один элемент, чем для цикла

Question

Я пытаюсь получить данные из базы данных mysql с помощью php, кодируя ее как 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); 

Это также работает.

Если я использовать консоль в хроме наряду с некоторыми лесозаготовками, я могу видеть массив, передаваемую длиной 15 элементов:

Однако, когда я пытаюсь разобрать мой JSON массив, который выглядит как это прибытие из PHP:

[{ "NAMESPACE": "5", "используется": "66"}, { "NAMESPACE": "6", "используется": "64"}, {» NAMESPACE ":" 7" , "используется": "68"}, { "NAMESPACE": "8", "используется": "67"}, { "NAMESPACE": "9", "используется": "64" }, { "NAMESPACE": "10", "используется": "67"}, { "NAMESPACE": "11", "используется": "72"}, { "NAMESPACE": "12", "используется" : "67"}, { "NAMESP АСЕ ":" 13" , "используется": "70"}, { "NAMESPACE": "14", "используется": "71"}, { "NAMESPACE": "15", "используется": "74" }, { "NAMESPACE": "16", "используется": "74"}, { "NAMESPACE": "17", "используется": "67"}, { "NAMESPACE": "18", "используется" : "70"}, { "NAMESPACE": "19", "используется": "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 элементов, и граф не работает

Насколько я могу судить, все выглядит так, как если бы я проверял 2D-массивы внутри консоли, данные выглядят правильными, но я не могу понять, почему я получаю дополнительный элемент, и почему граф не работает Не работай. Я попытался сплайсировать массив, который не работает.

Что такое принципиально иное между этими тремя реализациями (два, которые работают, а это нет?) Я полагаю, что я мог бы сделать цикл for, заданный фиксированным числом (j = 5; j < 20; j ++), но это не очень хорошо масштабируется и будет более беспорядочным, чем получение $ .each для работы.

Заранее благодарен!

Edit: полный 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); 
    } 
}); 

Answer 1

Это не проблема с $.each. Проверьте ответ, исходящий из PHP.

Добавить console.log(result) непосредственно перед $.each линия.

Также обратите внимание, что Array#push добавляет свой аргумент в массив.Таким образом, строка data.push(namespacedata); добавит один элемент в data, содержащий 16 элементов. Если вы хотите добавить 16 элементов к data, то вы должны посмотреть на Array#concat