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

时间:2018-09-18 04:05:33

标签: javascript jquery

我试图根据搜索显示表中的数据。我该如何实现?

function makeMove(s, player, m) { //source, player, move
  //if it is player 2, flip it around
  if (player == 2) {
    var s = [s[1], s[0]];
  }
  var target;
  var source;

  //move 0 is when the left hand targets the opponent's right hand
  //move 1 is when the right hand targets the opponent's left hand
  //move 2 is when the left hand targets the opponent's left hand
  //move 3 is when the right hand targets the opponent's right hand

  //the state [[1,1],[1,1]] stores the values of each hand and each opponent

  if (m == 0 || m == 3) {
    target = [1, 0];
  } else {
    target = [1, 1];
  }
  if (m == 0 || m == 2) {
    source = [0, 0];
  } else {
    source = [0, 1];
  }
    s[target[0]][target[1]] += s[source[0]][source[1]];
    s[target[0]][target[1]] %= 5;

  if (player == 2) {
    s = [s[1], s[0]];
  }
  return s;
}

function playmatch() {
  //the original state, 
  var gameState = [[1, 1], [1, 1]];
  //right after I create the value, for some reason it changes to the end result when I log it the next line.
  console.log(gameState);
    var winner = -1;
   while (winner == -1) {
     var choice = [0,1,2,3];
      var move = choice[Math.floor(Math.random() * choice.length)];
      gameState = makeMove(gameState, 1, move);
     var move = choice[Math.floor(Math.random() * choice.length)];
      gameState = makeMove(gameState, 2, move);
      if (gameState[0][0] == 0 && gameState[0][1] == 0) {
      winner = 2;
    }
    if (gameState[1][0] == 0 && gameState[1][1] == 0) {
      winner = 1;
    }
     console.log(gameState);
    }
return winner;
  }
playmatch();
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"
  }
]

预期o / p: 搜索任何字段,例如:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="skills">
<input type="email" placeholder="mail id">
<input type="text" placeholder="username">
<input type="submit" value="submit">

如果可以在我的表格中显示与该个人资料匹配的任何一项,则用户可以使用任何一个字段进行搜索。我怎样才能做到这一点?有人可以帮我解决一下吗?

4 个答案:

答案 0 :(得分:0)

在ES6中,您可以这样做:

app.use(bodyParser.json({limit: '50mb'}))

答案 1 :(得分:0)

/* Dataset*/
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"
}];



/* Get Result */
function getResult() {
    /* Read value from input fields */
    var skills = $("#skills").val() || '',
        email =  $("#email").val() || '',
        username = $("#username").val() || '';
        
    var result = [],
        i;

    for(i = 0; i < data.length; i++) {        
        if ((skills !== '' && data[i]["skills"].indexOf(skills) !== -1) || (data[i]["email"] === email) ||     (data[i]["username"] === username)) {
            result.push(data[i]);
        }
    }

    return result;
};

$('#submit').click(function onClick() {
    console.log(getResult()); // print expected data
});
<script 
src= 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>
<input id="skills" type="text" placeholder="skills">
<input id="email" type="email" placeholder="mail id">
<input id="username" type="text" placeholder="username"> 
<input id="submit" type="submit" value="submit">

答案 2 :(得分:0)

 <!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>

答案 3 :(得分:0)

您可以对以下技能进行搜索:

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"
  }];
var skills = "java,c";
function search(){
    result = [];
    var setSkills = skills.split(","); console.log(setSkills);
    data.map((current,index)=>{
        let currentSkills = current.skills.split(","); //console.log(currentSkills);
        // currentSkills = ["java", "c", "html", "css"]
        // setSkills = ["java", "c"] ;
        // length of set currentSkills  == length of set (currentSkills + setSkill) --> mean setSkills is subset of currentSkills
        let bool = Array.from(new Set(currentSkills) ).length == Array.from(new Set(currentSkills.concat(setSkills)) ).length;
        if(bool)
            console.log(data[index]);
    });
}
        <input type="text" placeholder="skills">
        <input type="email" placeholder="mail id">
        <input type="text" placeholder="username">
        <input type="submit" onclick="search();" value="submit">