CODEWITHSUNDEEP
jqueryjson
user3628181
user3628181

Reputation: 155

Based in selected JSON object Display tis value Using Jquery

On selecting JSON object from dropdown list the values releted to that object should display in body or textbox.

Here is my JSON demo:

         {  
    "EmployeeDetails":[  
      {  
         "EmpID":1,
         "EmpName":"xyz",
         "EmpPhn":231
      },
      {  
         "EmpID":1,
         "EmpName":"xyz",
         "EmpPhn":231
      }
    ],
    "jobDetails":{  
      "JobID":1,
      "JobName":"opqr"
    },
    "DeptDetails":{  
      "deptID":1,
      "deptname":"qtrye",
      "deptloc":"xbnz"
      } 
    }

Example if I select "JobDetails" from droplist then i should display

     JobID: 1 
     JobName: opqr

in body content.

Upvotes: 0

Views: 1612

Answers (1)

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7522

You can create a select element with options, which values are the keys of your JSON data. Then on change event, display the value of the specified key.

I have implemented the mentioned solution:

HTML

<select id="dropdown">
    <option value="EmployeeDetails">Employee Details</option>
    <option value="jobDetails">Job Details</option>
    <option value="DeptDetails">Dept Details</option>
</select>

<pre id="objView"></pre>

JavaScript

var json = {
    "EmployeeDetails": [{
        "EmpID": 1,
        "EmpName": "xyz",
        "EmpPhn": 231
    }, {
        "EmpID": 1,
        "EmpName": "xyz",
        "EmpPhn": 231
    }],
        "jobDetails": {
        "JobID": 1,
            "JobName": "opqr"
    },
        "DeptDetails": {
        "deptID": 1,
        "deptname": "qtrye",
        "deptloc": "xbnz"
    }
};

var $dropdown = $('#dropdown'),
    $objView = $('#objView');

$dropdown.on('change', function() {
    $objView.html(JSON.stringify(json[$dropdown.val()]));
});

$dropdown.trigger('change');

And here is the JSFiddle.

Note: I print the plain object in pre tag. You can prettify and do whatever you need before outputing in HTML.

UPDATE

I have updated the solution. Instead of having a static HTML, I have generated the options from the JSON. Here it is:

HTML

<select id="dropdown">
</select>

<pre id="objView"></pre>

JavaScript

var $dropdown = $('#dropdown'),
$objView = $('#objView'),
$docFragment = $(document.createDocumentFragment());

var json = {
    "EmployeeDetails": [{
        "EmpID": 1,
        "EmpName": "xyz",
        "EmpPhn": 231
    }, {
        "EmpID": 1,
        "EmpName": "xyz",
        "EmpPhn": 231
    }],
        "jobDetails": {
        "JobID": 1,
            "JobName": "opqr"
    },
        "DeptDetails": {
        "deptID": 1,
        "deptname": "qtrye",
        "deptloc": "xbnz"
    }
};

for (var prop in json) {
    $('<option/>', {
        val: prop,
        text: prop
    }).appendTo($docFragment);
}

$dropdown.append($docFragment);

$dropdown.on('change', function() {
    $objView.html(JSON.stringify(json[$dropdown.val()]));
});

$dropdown.trigger('change');

JSFiddle.

UPDATE 2 (regarding your comment)

Probably you have a few options here.

1.You can implement a function, which will take the object, iterate over the properties and nicely print them.

2.You can do the above using MV* framework, such as AngularJS. You just bind the model, set some value (e.g. object) and it will take care the iterating and related things for you. Finally, it will print the object in any form you like.

3.Finally, if you don't want to iterate over the properties or use a framework, you can simply remove the unwanted characters from the string. For example, this is code for removing curly/square brackets, double quotes as well as replacing the commas with new line:

$dropdown.on('change', function() {
    var objString = JSON.stringify(json[$dropdown.val()]);

    objString = objString.replace(/[\{\}\[\]\"]*/ig, '');    // Remove unwanted chars
    objString = objString.replace(/\,/ig, '<br/>');         // Replace commas with new lines (i.e. br tags)

    $objView.html(objString);
});

JSFiddle.

Upvotes: 2

Related Questions