putting JSON key values inside an array and displaying it through $.each loop using jquery

Question

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

{
"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.

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

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?

Is there any reason to not pass all values at once and get one (big) json file instead of passing each single returning many json files? — Lain
– Lain, Commented Nov 25, 2016 at 6:38
@Lain I have this merging operation in mind but for now i am trying to solve the mentioned problem for a single json file. — user5410644
– user5410644, Commented Nov 25, 2016 at 6:50

Robin Mackenzie · Accepted Answer · 2016-11-25 07:02:39Z

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.

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>

Collectives™ on Stack Overflow

putting JSON key values inside an array and displaying it through $.each loop using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related