javascript - 将 JSON 键值放入数组中，并使用 jquery 通过 $.each 循环显示它

Question

我正在尝试创建一个应用程序，我将在其中接收以下格式的多个 JSON 文件

{
"tname": [
    {
        "project_id" : "SC.0440",
        "project_name" : "AAA - Testing",
        "review_frequency" : "Monthly",
        "planned_ipr_date" : "2016-02-16T18:30:00Z",
        "actual_ipr_date" : "2016-02-16T18:30:00Z",
        "contract" : "G",
        "finance" : "G",
        "delivery" : "G",
        "people" : "G",
        "process" : "G",
        "project_rag" : "G",
        "isms_compliance" : "G",
        "bcms_compliance" : "G",
        "description" : ""
    }
]}

我正在选择两个选择字段，其中我将在一个选择字段中显示“tname”，并且在选择“tname”时，我将在另一个选择框中显示与其相关的所有键。我已经完成了我所在的部分获取第一个选择框的键值，并尝试在更改时在其他选择字段中显示其中的键值。

我编写了一个函数来根据第一个选择获取所有键值，其中 filePath() 是一个返回 JSON 文件路径的函数

function getColumn(keyval){
        var arr = filePath();   
    var colnames = [];
        $.each(arr, function (index, value){ 
            $.getJSON(value,function(result){
                $.each(result,function(key,field){
                    if(key == keyval){
                        $.each(field,function(key,field){
                            $.each(field,function(key,field){
                                colnames.push(key);
                            });
                            return false;
                        }); 
                    }else{
                        return false;
                    }
                });
            });
        });
        return colnames;
    }

现在我想在另一个选择框中显示所有返回的键值。我将如何使用 jquery 实现此目的？

Answer 1

这是一个代码示例，展示了如何填充第二个 <select>带有第一个 <select> 中命名的对象的键例如tname .

假设您将连接到 data允许引用第二个不同对象键的对象 <select>根据测试:

if(data.hasOwnProperty(selectKey)) {

这基本上意味着“是数据对象中第一次选择键的值”。

这是示例:

var data = {
	"tname": [{
		"project_id": "SC.0440",
		"project_name": "AAA - Testing",
		"review_frequency": "Monthly",
		"planned_ipr_date": "2016-02-16T18:30:00Z",
		"actual_ipr_date": "2016-02-16T18:30:00Z",
		"contract": "G",
		"finance": "G",
		"delivery": "G",
		"people": "G",
		"process": "G",
		"project_rag": "G",
		"isms_compliance": "G",
		"bcms_compliance": "G",
		"description": ""
	}]
};

$("#items1").on("change", function() {
  var selectKey = $(this).val();
  $("#items2").empty();
  if(data.hasOwnProperty(selectKey)) {
    $.each(data[selectKey][0], function(k, v) {
      $("#items2").append("<option value='" + k + "'>" + k + "</option>");
    }); 
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="select1">
  <select id="items1">
    <option value="foo">foo</option>
    <option value="tname">tname</option>
    <option value="bar">bar</option>
  </select>
</div>
<div id="select2">
  <select id="items2">
  </select>
</div>