pull json data from a json file on a .click

Question

I have a text box and a button. On the button . click function the name appears but I want id (that the user enters into the text box for the corresponding name to appear)

this is a snip from the json:

{"user":[{"ID" : "001","name": "Zara Ali"}]}

This is the button/text ( that i have inside an alert div because i think it looks cool in my page and works with the .click)

<div class="alert alert-info"> 
  <input type="text" id="userName" value> 
  <button type="button" id="loginbtn" class="btn btn-primary btn-md">Login</button>
</div>

and this is the js i have used for the .click

$(document).ready(function() {
  $("#loginbtn").click(function(event){
    $.getJSON('result.json', function(jd) {
      $('#details').html('<p> Name: ' + jd.name + '</p>');
    });
  });           
});

the result is going inside:

<div id = "details">

</div>

Are you returning more than one user? If not why the array instead of returning just the user object? — Patrick Evans
– Patrick Evans, Commented Dec 14, 2015 at 15:42
console.log(jd). you don't have jd.name, you have jd[0].name. an object containing an array of objects... — Marc B
– Marc B, Commented Dec 14, 2015 at 15:46
try this @Mac $.grep( [{"ID" : "001","name": "Zara Ali"}], function( n, i ) { return n.ID==='001'; }); — Tummala Krishna Kishore
– Tummala Krishna Kishore, Commented Dec 14, 2015 at 15:54

jcubic · Accepted Answer · 2015-12-14 15:56:35Z

1

Try this:

 $(document).ready(function() {
    $("#loginbtn").click(function(event){
       $.getJSON('result.json', function(jd) {
          var id = $('#userName').val();
          for (var i=0; i<jd.user.length; i++) {
            if (jd.user[i].ID == id) {
              $('#details').html('<p> Name: ' + jd.user[i].name + '</p>');
            }
          }
       });
    });
 });

edited Dec 14, 2015 at 15:56

answered Dec 14, 2015 at 15:45

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

L Mac Over a year ago

Hi jcubic - thank you very much for your answer but this did not work for me - would there be anything I would have to change in my json maybe?

jcubic Over a year ago

@LMac forget about val() try now.

jcubic Over a year ago

@LMac If it solve your problem don't forget to mark the answer.

Collectives™ on Stack Overflow

pull json data from a json file on a .click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related