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

时间:2016-11-25 06:33:27

标签: javascript jquery json

我正在尝试创建一个应用程序,我将收到以下格式的多个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实现这一点吗?

1 个答案:

答案 0 :(得分: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>