logo标签列表

根据键从JSON对象中获取数据

javascripthtml
3
我有这个JSON对象。
{ 
  "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个不同的用户类别。当我选择其中任何一个时，我想根据选择显示数据。 我的HTML页面包含一个选择框来选择类别。
 <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>
1
发布HTML并提及您尝试过的事情。 - Viraj Nalawade
1
当我选择它们中的任何一个时，我想显示用户类别为“管理员”的数据。管理员类别的数据在哪里？ - Mox Shah
在 headerContent 中检查第五个数据（属性）。 - Nisfan
@Coder007已经发布了我的答案。 - Mox Shah
1
对不起...我想我的问题不是独一无二的。我没有看到任何与用户类别="管理员"相关的数据...第5个数组索引元素描述了一些选择选项，但没有数据。 - devnull69
3个回答
4

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链接 
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();
我有一个小问题。JSON数据存储在jsonInfo.json文件中。因此，首先我必须将该文件的内容分配给一个JSON对象。例如：var jsonObj = content('jsonInfo.json'); - Nisfan
请查看：https://dev59.com/w2oy5IYBdhLWcg3wa9Uj 您可以使用 AJAX 调用来读取文件。我在我的帖子中进行了编辑。目前无法测试，但应该可以工作。 - Thalsan
0
你可以像这样做： 

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>

@Coder007发生了什么？它在这里显示，只需运行这段代码片段。 - Mox Shah
对于所有选择，它将打印“用户类别userCategory”。 - Nisfan
0
您可以使用这种方法...
var data;
for (var key in data) {
   var value = data[key];
   alert(key + ", " + value);
}
实际上，我想在名为 bodyContent 的 JSON 对象中显示数据对象。如果选择框的值为“全部”，则列出其中的所有数据。如果选择框的值为“管理员”，则列出 bodyContent 对象中 userCategory=Admin 的数据。 - Nisfan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接