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

Split JSON into two arrays gives undefined keys-values

本文关键字：数组 未定义 键值 两个 拆分 JSON      更新时间：2023-09-26

我有一个项目要做，我从数据库中创建一个json对象，然后我需要在ajax的帮助下获得它，并将其拆分为两个数组，这样我就可以使用这些值在chart.js上创建图表。。。这可能真的很愚蠢，但我还在学习，所以我想不通。我已经尝试过其他类似案例中给出的许多答案，但都没有奏效。

当我尝试运行创建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'](来获取值，但都不起作用。

我的控制台日志

您使用的是for in循环，而不是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);
        }

您得到的是一个对象数组。使用jQuery，您可以处理如下两个数组：

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

相关文章：