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

时间:2021-05-16 13:45:37

I am trying to create an application where i will receive multiple JSON file in below format

我正在尝试创建一个应用程序,我将收到以下格式的多个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" : ""
    }
]}

And i am taking two select fields in which i will display "tname" in one and on select of "tname" i will display all the key related to it in the other select box.i have done the part where i am getting key values for the first select box and trying to display key values inside it in other select field on change.

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

I have written a function to get all the key values based on the first selection where filePath() is a function which returns the path of the JSON files

我编写了一个函数来获取基于第一个选择的所有键值,其中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;
    }

Now I want to display all the returned key values inside another select box.how i will achieve this using jquery?

现在我想在另一个选择框中显示所有返回的键值。我将使用jquery实现这一点吗?

1 个解决方案

#1


1  

Here's a code sample showing how to populate the 2nd <select> with the keys for an object named in the 1st <select> e.g. tname.

这是一个代码示例,演示如何使用第一个,例如TNAME。

The assumption is that you would be concatenating into the data object which enables referencing different object keys for the 2nd <select> based on the test:

假设您将连接到数据对象,该数据对象允许根据测试引用第二个

if(data.hasOwnProperty(selectKey)) {

Which basically means 'is the value from the 1st select a key in the data object'.

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

Here is the sample:

这是样本:

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>

#1


1  

Here's a code sample showing how to populate the 2nd <select> with the keys for an object named in the 1st <select> e.g. tname.

这是一个代码示例,演示如何使用第一个,例如TNAME。

The assumption is that you would be concatenating into the data object which enables referencing different object keys for the 2nd <select> based on the test:

假设您将连接到数据对象,该数据对象允许根据测试引用第二个

if(data.hasOwnProperty(selectKey)) {

Which basically means 'is the value from the 1st select a key in the data object'.

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

Here is the sample:

这是样本:

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>