根據密鑰從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獲取數據

回答

相關問題