Javascript 如何根据搜索在表中显示JSON数据？_Javascript_Jquery

Javascript 如何根据搜索在表中显示JSON数据？

javascript jquery

Javascript 如何根据搜索在表中显示JSON数据？,javascript,jquery,Javascript,Jquery,我试图根据搜索结果显示表中的数据。我怎样才能做到这一点 var数据=[{ “用户名”：“John Doe”， “电子邮件”：jn@gmail.com", “技能”：“java、c、html、css” }, { “用户名”：“简·史密斯”， “电子邮件”：js@gmail.com", “技能”：“java、sql” }, { “用户名”：“Chuck Berry”， “电子邮件”：cb@gmail.com", “技能”：“vuejs” } ] 在ES6中，您可以执行以下操作： results

我试图根据搜索结果显示表中的数据。我怎样才能做到这一点

var数据=[{
“用户名”：“John Doe”，
“电子邮件”：jn@gmail.com",
“技能”：“java、c、html、css”
},
{
“用户名”：“简·史密斯”，
“电子邮件”：js@gmail.com",
“技能”：“java、sql”
},
{
“用户名”：“Chuck Berry”，
“电子邮件”：cb@gmail.com",
“技能”：“vuejs”
}
]

在ES6中，您可以执行以下操作：

results = array.filter (x=>x.username.search(search_txt));

let my_list = [{"username":"John Doe","email":"jn@gmail.com","skills":"java,c,html,css"},{"username":"Jane Smith","email":"js@gmail.com","skills":"java,sql"},{"username":"Chuck Berry","email":"cb@gmail.com","skills":"vuejs"}];
results = my_list.filter (x => x.skills.search('java')!=-1);
console.log(results);
//result is : [{"username":"John Doe","email":"jn@gmail.com","skills":"java,c,html,css"},{"username":"Jane Smith","email":"js@gmail.com","skills":"java,sql"}]

/*数据集*/
风险值数据=[{
“用户名”：“John Doe”，
“电子邮件”：jn@gmail.com",
“技能”：“java、c、html、css”
},
{
“用户名”：“简·史密斯”，
“电子邮件”：js@gmail.com",
“技能”：“java、sql”
},
{
“用户名”：“Chuck Berry”，
“电子邮件”：cb@gmail.com",
“技能”：“vuejs”
}];
/*得到结果*/
函数getResult（）{
/*从输入字段读取值*/
var skills=$（“#skills”）.val（）| |“”，
email=$（“#email”）.val（）| |“”，
用户名=$（“#用户名”）.val（）；
var结果=[]，
我
对于（i=0；i


搜寻
名称
电子邮件
技能
风险值数据=[{
“用户名”：“John Doe”，
“电子邮件”：jn@gmail.com",
“技能”：“java、c、html、css”
},
{
“用户名”：“简·史密斯”，
“电子邮件”：js@gmail.com",
“技能”：“java、sql”
},
{
“用户名”：“Chuck Berry”，
“电子邮件”：cb@gmail.com",
“技能”：“vuejs”
}];
$（“#提交”）。单击（函数（）{
var skills=$（'#skills'）.val（）；
var email=$（'#email'）.val（）；
var username=$（'#username'）.val（）；
如果（用户名）{
搜索（用户名）；
}
});
函数搜索（用户名）{
var name=用户名；
var-html；
forEach（函数（currentValue、索引、数组）{
if（currentValue.username==名称）{
html=”“+currentValue.username+“”+
“+currentValue.email+”您可以对以下技能进行搜索：

var数据=[{
“用户名”：“John Doe”，
“电子邮件”：jn@gmail.com",
“技能”：“java、c、html、css”
},
{
“用户名”：“简·史密斯”，
“电子邮件”：js@gmail.com",
“技能”：“java、sql”
},
{
“用户名”：“Chuck Berry”，
“电子邮件”：cb@gmail.com",
“技能”：“vuejs”
}];
var skills=“java，c”；
函数搜索（）{
结果=[]；
var setSkills=skills.split（“，”）；console.log（setSkills）；
data.map（（当前，索引）=>{
让currentSkills=current.skills.split（“，”；//console.log（currentSkills）；
//currentSkills=[“java”、“c”、“html”、“css”]
//setSkills=[“java”，“c”]；
//集合的长度currentSkills==集合的长度（currentSkills+setSkill）-->平均setSkills是currentSkills的子集
设bool=Array.from（新集（currentSkills））.length==Array.from（新集（currentSkills.concat（setSkills））.length；
如果（bool）
console.log（数据[索引]）；
});
}

试试这个：它只按用户名搜索并在表中显示相关数据。您是如何调用getResult（）？$（“#提交”）的。单击（function（）{var result=getResult（）；//您可以像这样调用console.log（result）；）；是的，普拉纳布，我也试过。不知道我犯了什么错误，我得到的是空对象。你能编辑这个片段吗，它会帮助我的out@Manoj，添加了代码片段。请看一看。希望，这就是你要寻找的东西。还有一个疑问，如何在每次搜索时清除结果？例如，如果我搜索java，然后如果我搜索f或者python如何清除java结果以及如何仅显示python？还有一个问题是，如果我尝试使用大写字母，它不会显示。您将在您的大小写中得到一个结果。在这里，代码段也包含前面的结果。要使结果不区分大小写，您必须设置如下条件（我只展示了电子邮件，你必须为所有人这么做）：data[i][“email”].toUpperCase（）==email.toUpperCase（）只需使用DataTables插件。这是最简单、最方便的解决方案。
 <!DOCTYPE html>
 <html>
 <head>
 <title>SEARCH</title>
 </head>
<body>
<input type="text" placeholder="skills" id="skills">
<input type="email" placeholder="mail id" id="email">
<input type="text" placeholder="username" id="username">
<input type="submit" value="submit" id="submit">
<table>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Skills</th>
    </tr>
    <tr id="search">

    </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

    var data = [{
                "username": "John Doe",
                "email": "jn@gmail.com",
                "skills": "java,c,html,css"
              },
              {
                "username": "Jane Smith",
                "email": "js@gmail.com",
                "skills": "java,sql"
              },
              {
                "username": "Chuck Berry",
                "email": "cb@gmail.com",
                "skills": "vuejs"
              }];

    $('#submit').click(function(){
        var skills = $('#skills').val();
        var email = $('#email').val();
        var username = $('#username').val();

        if(username){
            search(username);
        }




    });


    function search(username){
        var name = username;
        var html ;
            data.forEach(function(currentValue, index, array){

                if(currentValue.username == name){
                    html = "<td>"+currentValue.username+"</td>"+
                            "<td>"+currentValue.email+"</td"+
                            "<td>"+currentValue.skills+"</td>"
                            ;
                        }else{
                            html = "Result Not Found";
                        }
            });

            return $('#search').html(html);


    }

</script>
</body>
</html>