如何使用此 JSON 响应文件进行迭代

Question

如上所述，我不知道如何使用我通过使用此代码echo json_encode(array_merge($outp, $outp2)); 得到的服务器端 php 的这种 JSON 响应

[
    {
        "stuid":"12",
        "stuname":"Velino Meratis",
        "stucourse":"BSIT",
        "stustat":"0",
        "stulyear":"4",
        "stulog":"feb 16 2017"
    },
    {
        "stuid":"13",
        "stuname":"Alana Melker",
        "stucourse":"BSCE",
        "stustat":"1",
        "stulyear":"5",
        "stulog":"feb 16 2017"
    },
    {
        "stuid":"12",
        "cname":"InfoTech000",
        "clog":"1"
    },
    {
        "stuid":"12",
        "cname":"InfoTech001",
        "clog":"2"
    },
    {
        "stuid":"12",
        "cname":"C101",
        "clog":"3"
    },
    {
        "stuid":"13",
        "cname":"CE000",
        "clog":"4"
    },
    {
        "stuid":"13",
        "cname":"CE001",
        "clog":"5"
    },
    {
        "stuid":"13",
        "cname":"C101",
        "clog":"6"
    }
]   

如果我在客户端 javascript 中使用此代码

if (this.readyState == 4 && this.status == 200) {
    students = JSON.parse(this.responseText);
    students.forEach(function(item){
    console.log(item.stuid);
    x = item.stuid;
    document.getElementById("demo").innerHTML += x + " " + item.stuname + "<br>" + item.cname + "<br>";
    });
}

它最终给了我这个：-

12 Velino Meratis
undefined
13 Alana Melker
undefined

不知何故，我可以迭代 stuid 和 stuname，但它不允许它们包含 cname 作为数组。

我怎样才能把它变成这样的东西：-

12 Velino Meratis
InfoTech000, InfoTech001, C101
13 Alana Melker
CE000, CE001, C101

有人可以帮忙解释一下吗？

Answer 1

您可以检查数组是否包含键，这样您就可以避免“未定义”错误。

你可以这样做

if(item.hasOwnProperty('cname'))
{
console.log(item.cname);
}

您也可以将它用于 stuname 或其他键。

Answer 2

您需要通过唯一 ID 合并数组中的 student 对象。一种方法是将新的stuids 添加到数组中，并将其与具有相同stuid 的后续项合并。拥有一批独特的学生后，您就可以继续其他目标了。

if (this.readyState == 4 && this.status == 200) {
    var students_raw = JSON.parse(this.responseText);
    var students = [];

    students_raw.forEach(function(item){
        var existing = students.find($item => item.stuid === $item.stuid);

        if (existing) {
            existing = Object.assign({}, existing, item);
        } else {
            students.push(item);
        }
    });

    // your print loop
    students.forEach(function(item) {
        var x = item.stuid;
        document.getElementById("demo").innerHTML += x + " " + item.stuname + "<br>" + item.cname + "<br>";
    });
}

请注意：Array.reduce() 和 Object.assign() 不受广泛支持。你可能需要 polyfill 这些方法

Answer 3

注意：此答案假设您愿意并且能够更改来自 PHP 的数据

信用到期，这是@Magnus Eriksson 评论的延伸。

最好保持相关数据相互关联。您应该使用格式良好的数据获得更好的灵活性。理想情况下，您应该在服务器端执行此操作，并将已格式化的数据呈现给客户端。

您应该尝试为您的输出实现类似于以下内容：

[{
    "stuid": "12",
    "stuname": "Velino Meratis",
    "stucourse": "BSIT",
    "stustat": "0",
    "stulyear": "4",
    "stulog": "feb 16 2017",
    "classes": [{
        "cname": "InfoTech000",
        "clog": "1"
    }, {
        "cname": "InfoTech001",
        "clog": "2"
    }, {
        "cname": "C101",
        "clog": "3"
    }]
}, {
    "stuid": "13",
    "stuname": "Alana Melker",
    "stucourse": "BSCE",
    "stustat": "1",
    "stulyear": "5",
    "stulog": "feb 16 2017",
    "classes": [{
        "cname": "CE000",
        "clog": "4"
    }, {
        "cname": "CE001",
        "clog": "5"
    }, {
        "cname": "C101",
        "clog": "6"
    }]
}];

注意我使用类作为属性名称，因为我们正在使用课程及其类。

您的 javascript 现在看起来像：

if (this.readyState == 4 && this.status == 200) {
    students = JSON.parse(this.responseText);
    students.forEach(function(item){
    console.log(item.stuid);
    x = item.stuid;
    document.getElementById("demo").innerHTML += x + " " + item.stuname + "<br>" + item.classes.map(function(elem){
return elem.cname;}).join(",") + "<br>";
    });
}

注意map 函数在 IE8 及更低版本中不起作用。

现在是一个工作示例：

var students = [{
	"stuid": "12",
	"stuname": "Velino Meratis",
	"stucourse": "BSIT",
	"stustat": "0",
	"stulyear": "4",
	"stulog": "feb 16 2017",
	"classes": [{
		"cname": "InfoTech000",
		"clog": "1"
	}, {
		"cname": "InfoTech001",
		"clog": "2"
	}, {
		"cname": "C101",
		"clog": "3"
	}]
}, {
	"stuid": "13",
	"stuname": "Alana Melker",
	"stucourse": "BSCE",
	"stustat": "1",
	"stulyear": "5",
	"stulog": "feb 16 2017",
	"classes": [{
		"cname": "CE000",
		"clog": "4"
	}, {
		"cname": "CE001",
		"clog": "5"
	}, {
		"cname": "C101",
		"clog": "6"
	}]
}];


students.forEach(function(item){
    console.log(item.stuid);
    x = item.stuid;
    document.getElementById("demo").innerHTML += x + " " + item.stuname + "<br>" + item.classes.map(function(elem){
return elem.cname;}).join(",") + "<br>";
    });

<div id="demo"></div>

正如其他答案和 cmets 所述，现有代码的问题在于，并非 json 数组中的所有对象都具有您引用的属性。

Answer 4

你也可以这样尝试一次

HTML

<div id="result"></div>

脚本

var dataJSON = [
{
    "stuid":"12",
    "stuname":"Velino Meratis",
    "stucourse":"BSIT",
    "stustat":"0",
    "stulyear":"4",
    "stulog":"feb 16 2017"
},
{
    "stuid":"13",
    "stuname":"Alana Melker",
    "stucourse":"BSCE",
    "stustat":"1",
    "stulyear":"5",
    "stulog":"feb 16 2017"
},
{
    "stuid":"12",
    "cname":"InfoTech000",
    "clog":"1"
},
{
    "stuid":"12",
    "cname":"InfoTech001",
    "clog":"2"
},
{
    "stuid":"12",
    "cname":"C101",
    "clog":"3"
},
{
    "stuid":"13",
    "cname":"CE000",
    "clog":"4"
},
{
    "stuid":"13",
    "cname":"CE001",
    "clog":"5"
},
{
    "stuid":"13",
    "cname":"C101",
    "clog":"6"
}
]   ;
 var arr = {};
 for(var i = 0 ; i< dataJSON.length ; i++){
    var ele = dataJSON[i];
    if(arr[ ele.stuid ]==undefined){
        arr[ ele.stuid ] = {}; 
    }
    arr[ ele.stuid ]['stuid'] = ele.stuid;
    if(ele.stuname!=undefined){
       arr[ ele.stuid ]['stuname'] = ele.stuname;
    }
    if(arr[ ele.stuid ]['cname'] == undefined){
       arr[ ele.stuid ]['cname'] = [];
    }
    if(ele.cname!=undefined){
       arr[ ele.stuid ]['cname'].push(ele.cname);
    }
 }
 var str = '';
 for(var key in arr){
    var obj = arr[key];
    str += obj['stuid'] +" "+obj['stuname']+'<br/>';
    str += obj['cname'].toString()+'<br/>';
 }
 document.getElementById("result").innerHTML = str;

谢谢，