根据密钥从JSONObject获取数据

我有这个JSONObject。根据密钥从JSONObject获取数据

{ 
    "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" 
    } 
    ] 
}

的headerContent描述的bodyContent属性。现在，默认情况下，对象（如user_1）中的所有数据将显示在details。在html页面中，我有一个包含3个值Admin，Client，Regulator的选择框;这是3种不同的用户类别。当我选择其中的任何一个时，我想用userCatagory =“Admin”显示数据。

我的HTML页面包含一个选择框来选择类别。

<script src="JSCode.js"></script> 
    <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> 
    <tr> 
     <td> <p id='details'> </P> </td> 
    </tr> 
</table>

当选择选项发生变化时，details中的内容应相应更改。

来源

2015-05-20 Nisfan

后你'html'太 – ozil

置HTML，也别说你已经尝试过的事情。 –

**当我选择其中的任何一个时，我想用userCatagory =“Admin”显示数据。**其中是Admin类别的数据？在'headerContent'中检查第5个数据（属性）中的 –

的jsfiddlehere

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>

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();

在改变它执行updateList()。该函数获取元素的值。然后它执行searchJSON()。此功能需要数据（jsonObj），数据中的内容（在您的案例中为bodyContent），您正在查找的密钥（在您的案例中为userCategory）和您正在查找的值。该函数遍历数据对象并搜索关键字。如果该值与您的选择相同，则将该对象添加到数组中。当循环完成时，它返回结果。

最后一个函数是一个简单的打印函数，将数据放入您的html中。为确保第一次打印，只需运行updateList()一次。

LOADING以.jsonSO 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();

来源

2015-05-20 07:53:41 Thalsan

bt。我有一个小问题。 JSON数据存储在'jsonInfo.json'文件中。所以，首先我必须将这个文件的内容分配给一个json对象。像'var jsonObj = content（'jsonInfo.json'）;' – Nisfan

看看：[http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery] （http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery）您可以使用AJAX调用来读取文件。在我的文章中进行编辑。不能测试它atm，但它应该工作。 – Thalsan

您可以使用此方法..

var data; 
for (var key in data) { 
    var value = data[key]; 
    alert(key + ", " + value); 
}

来源

2015-05-20 06:50:09 user3774874

增加了它，但请用HTML和一些解释更新答案.. –

实际上，我想在名为'bodyContent'的json对象中显示数据对象。如果选择框的值为“全部”，则列出其中的所有数据。如果选择框的值为“Admin”，则将数据列在'userCategory' ='Admin'的'bodyContent'对象中。 – Nisfan

你可以做这样的事情：

var data = { 
 
    "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" 
 
    } 
 
    ] 
 
} 
 

 
$("#listSelect").change(function(){ 
 
var opt = $(this).val(); 
 
    console.log(opt); 
 
    $.each(data.headerContent,function(i,v){ 
 
     if(v.hasOwnProperty("options")) 
 
     { 
 
      var index = -1; 
 
      v.options.some(function(element, i) { 
 
       if (opt === element.toLowerCase()) { 
 
        index = i; 
 
        return true; 
 
       } 
 
      }); 
 
      if(index != -1) 
 
      { 
 
       $("#details").text(v.name + " " + v.key); 
 
      } 
 
      
 
      
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table align='center'> 
 
    <tr> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <select id='listSelect' onChange=""> 
 
       <option value='' selected>All</option> 
 
       <option value='admin'>Admin</option> 
 
       <option value='client'>Client</option> 
 
       <option value='regulator'>Regulator</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <p id='details'> 
 
      </P> 
 
     </td> 
 
    </tr> 
 
</table>

来源

2015-05-20 07:26:29

什么都没发生：/ – Nisfan

@ Coder007什么没有发生？它显示在这里，只是运行这个代码片段。 –

其印刷'用户类别userCategory'所有选择 – Nisfan

根据密钥从JSONObject获取数据

回答

相关问题