title: Display json data in html table using jQuery
body: <p>How to display json data in html table using jQuery ? and How can i remove case sensitive while searching the result?</p>
  
  <p>expected output </p>
  
  <p><a href="https://i.stack.imgur.com/plifo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/plifo.png" alt="enter image description here"></a>
  How can i display the result in my table? How can i achieve this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; data.length; i++) {
      if ((skills !== '' &amp;&amp; data[i]["skills"].indexOf(skills) !== -1) || (data[i]["email"] === email) || (
          data[i]["username"] === username)) {
        result.push(data[i]);
      }
    }
  
    return result;
  };
  
  $('#submit').click(function onClick() {
    var output = getResult();
    console.log(output);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input id="skills" type="text" placeholder="skills"&gt;
  &lt;input id="email" type="email" placeholder="mail id"&gt;
  &lt;input id="username" type="text" placeholder="username"&gt;
  &lt;input id="submit" type="submit" value="submit"&gt;</code></pre>
  </div>
  </div>
  </p>