get data from JSON Object according to a key

Question

I have this JSON Object.

{ 
  "headerContent": [
    {
      "name": "User Id",
      "key": "userId",
      "type": "text",
      "default": "Enter User Id"
    },
    {
      "name": "User Name",
      "key": "userName",
      "type": "text",
      "default": "Enter User Name"
    },
    {
      "name": "Password",
      "key": "password",
      "type": "password",
      "default": "Enter Password"
    },
    {
      "name": "Mobile Number",
      "key": "mobileNumber",
      "type": "text",
      "default": "Enter Mobile Number"
    },
    {
      "name": "User Category",
      "key": "userCategory",
      "type": "select",
      "default": "Select Category",
      "options" : ["Admin", "Client", "Regulator"]
    },
    {
      "name": "E-Mail",
      "key": "email",
      "type": "text",
      "default": "Enter Email"
    },
    {
      "name": "User Access",
      "key": "userAccess",
      "type": "select",
      "default": "Select User Access",
      "options" : ["All", "Site"]
    }
  ],
  "bodyContent": [
    {
      "userId": "user_1",
      "userName": "DemoUser",
      "mobileNumber": "99999999",
      "userCategory" : "Admin",
      "email" : "[email protected]",
      "userAccess" : "All"
    }
  ]
}

The headerContent describes the attributes of bodyContent. Now, by default all data in the object (like user_1) will be displayed in details. In the html page I have a select box containing 3 values [Admin, Client, Regulator]; which are 3 different user category. When I select any of them, I want to display data based on the selection.

My HTML page contains a select box to select the category.

 <script src="JSCode.js"></script>
 <select id='listSelect' onChange="updateList()">
    <option value='' selected >All</option> 
    <option value='admin'>Admin</option>
    <option value='client'>Client</option>
    <option value='regulator'>Regulator</option>
</select>
<div id='details'> </div>

Answer 1

JSFiddle here

HTML

<table align='center' >
    <tr>
        <td> <select id='listSelect' onChange="updateList()">
            <option value='' selected >All</option> 
            <option value='Admin'>Admin</option>
            <option value='Client'>Client</option>
            <option value='Regulator'>Regulator</option>
        </select></td>
   </tr>
</table>
<div id="result"></div>

JS

var jsonObj = { 
  "headerContent": [
    {
      "...": "..."
    }
  ],
  "bodyContent": [
    {
      "userId": "user_1",
      "userName": "DemoUser",
      "mobileNumber": "99999999",
      "userCategory" : "Admin",
      "email" : "[email protected]",
      "userAccess" : "All"
    },
    {
      "userId": "user_2",
      "userName": "DemoUser",
      "mobileNumber": "99999999",
      "userCategory" : "Client",
      "email" : "[email protected]",
      "userAccess" : "All"
    }
  ]
};

function searchJSON (json, content, where, is) {
    content = json[content];
    var result = [];
    for (var key in content) {
        if (content[key][where] == is || is == '') {
            result.push(content[key]);
        }
    }
    return result;
}

function printObj (obj, container) {
    var html = '<table>';
    for (var i in obj) {
        for (var j in obj[i]) {
            html += '<tr><td>' + j + '</td><td>' + obj[i][j] + '</td></tr>';
        }
        html += '<tr><td class="black"></td><td class="black"></td></tr>';
    }
    document.getElementById(container).innerHTML = html;
}

function updateList () {
    var e = document.getElementById("listSelect");
    var value = e.options[e.selectedIndex].value;
    printObj(searchJSON(jsonObj, 'bodyContent', 'userCategory', value), 'result');
}

updateList();

On change it executes updateList(). This function gets the value of the element. Then it executes searchJSON(). This function needs the data (jsonObj), the content in your data (in your case bodyContent), the key you are looking for (in your case userCategory) and the value you are looking for. The function loops through the data object and searches for the key. If the value is the same as your select, it adds the object to an array. When the loop is complete it returns the result.

Last function is a simple print function to place the data inside your html. To make sure it gets printed first time, just run the updateList() once.

LOADING .JSON SO link

var xmlhttp;

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
       if(xmlhttp.status == 200){
           jsonObj = xmlhttp.responseText;
       }
       else if(xmlhttp.status == 400) {
          alert('There was an error 400')
       }
       else {
           alert('something else other than 200 was returned')
       }
    }
}

xmlhttp.open("GET", "jsonInfo.json", true);
xmlhttp.send();