Question

我有一个项目要做，我从数据库创建一个json对象，然后我需要在ajax的帮助下获取它并将其拆分为两个数组，以便我可以使用这些值在chart.js上创建一个图表我可以得到json对象，但问题是，当我尝试循环创建我的两个数组时，我得到未定义的值而不是json包含的值...这可能是一些非常愚蠢的东西，但我仍然在学习我无法弄明白。我已经尝试了许多在其他类似情况下给出的答案，但没有任何效果。

当我尝试运行创建json的data.php时，我在浏览器中得到了这个：

[{"name":"Messenger","number":"29"},{"name":"Viber","number":"28"},{"name":"Facebook","number":"28"},{"name":"Skype","number":"17"}]

我的javascript获取json，将其拆分为两个数组并创建图表：

$(document).ready(function(){
    $.ajax({
        url: "http://localhost/project_test/data.php",
        method: "GET",
        success: function(data) {
            console.log(data);

            //trying to create the two arrays...
            var applications = [];
            var number = [];

            for(var i in data) {
                applications.push("App name " + data[i]['name']);
                number.push(data[i].number);
            }
            console.log(applications);
            console.log(number);

            //chart.js things....
            var ctx = $("#mycanvas");
            var barGraph = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: applications,
                    datasets: [{
                        label: 'Chart',
                        data: number,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },  
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }               
                        }]
                    }
                }
            });
        },
        error: function(data) {

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

我使用了两种方式（data[i].name和data[i]['name']）来获取值，但没有一种方法有效。

my console logs

Answer 1

您正在使用for循环，而不是for循环。

for(var i in data) {
            applications.push("App name " + data[i]['name']);
            number.push(data[i].number);
        }

应该是

for(var i = 0; i < data.length; i++) {
            applications.push("App name " + data[i]['name']);
            number.push(data[i].number);
        }

Answer 2

您正在获取一组对象。使用jQuery，您可以像这样接近2个数组：

var data = [{"name":"Messenger","number":"29"},{"name":"Viber","number":"28"},{"name":"Facebook","number":"28"},{"name":"Skype","number":"17"}];

var names = [];
var numbers = [];

$.each(data, function(i, row) {
    names.push(row.name);
    numbers.push(row.number);
});

<强> Fiddle

将JSON拆分为两个数组会给出未定义的键值

2 个答案: