Question

我有这个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" : "demo@kl.com",
      "userAccess" : "All"
    }
  ]
}

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

我的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中的内容应相应更改。

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" : "demo@kl.com",
      "userAccess" : "All"
    },
    {
      "userId": "user_2",
      "userName": "DemoUser",
      "mobileNumber": "99999999",
      "userCategory" : "Client",
      "email" : "demo@kl.com",
      "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()一次。

加载.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();

Answer 2

你可以这样使用..

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

Answer 3

您可以这样做：

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" : "demo@kl.com",
      "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>

根据密钥从JSONObject获取数据

3 个答案: