Display JSON Data in HTML using Laravel 4

Question

Please help me with my problem in displaying JSON data into my view..

my script is:

 $('#supplierId').change(function(){
 $.get("{{ url('api/dropdown')}}", 
    { option: $(this).val() }, 
    function(data) {
      var firstnameID = $('#firstnameID');
      $.each(data, function(index, element) {   
          firstnameID.val(element.first_name);
     });
  });
});

and my JSON reply is:

{"id":7,"first_name":"John","last_name":"Doe"}

the thing is when i tried to:

alert(element.first_name);

it says UNDEFINED, but when I:

alert(element);

it gives me the value of the last name which is Doe.. my question is how can I then access the other values like the ID and the first name..

EDITED:

this is my route:

Route::get('api/dropdown', function(){
$input = Input::get('option');
$supllier = Supplier::find($input);
returnResponse::json($supllier->select(array('id','first_name','last_name'))
    ->find($input));
});

Please help me with this one, This is my first time using JSON so im a bit confuse on how this works.

Best Regards -Melvn

rather than use alert(), try displaying it in the browser's console using console.log() ... the console handles these js objects much better than alert — msturdy
– msturdy, Commented Nov 22, 2013 at 12:39
Hello @VitKos i want to auto fill some text box with other user details like last_name, adress, etc automatically once i select a specific id on my select box.. — melvnberd
– melvnberd, Commented Nov 22, 2013 at 12:41
In terms of future usage.. you might want to consider using URL::route() or URL::action() to reference your AJAX script. I have created an AjaxController for this in the past.. — msturdy
– msturdy, Commented Nov 22, 2013 at 13:13
Browsers have consoles, use them to see the result of your request. If an error had occurred in your code the response may not be JSON at all, if you dont handle these exceptions with App::error. — Rolice
– Rolice, Commented Nov 22, 2013 at 13:36

Qullbrune · Accepted Answer · 2013-11-22 14:00:52Z

3

Why are you using each? This should work:

$('#supplierId').change(function(){
 $.get("{{ url('api/dropdown')}}", 
    { option: $(this).val() }, 
    function(data) {
      var firstnameID = $('#firstnameID');

          firstnameID.val(data.first_name);

  });
});

answered Nov 22, 2013 at 14:00

Qullbrune

1,9452 gold badges20 silver badges20 bronze badges

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

1 Comment

melvnberd Over a year ago

Thank you very much for that answer.. Im not really good on javascript and ajax.. i just did copied it on another site.. but this one really did the job! Im very glad right now Thank YOU VERY MUCH!

msturdy · Accepted Answer · 2013-11-22 13:11:30Z

2

Ok, give this a try..

Explicitly state that what you're expecting back from the server is JSON using the dataType option in get().

$('#supplierId').change(function()
{
  $.get("{{ url('api/dropdown')}}", 
    { option: $(this).val() }, 
    function(data) 
    {
      var firstnameID = $('#firstnameID');
      $.each(data, function(index, element) 
      {   
        firstnameID.val(element.first_name);
      });
    },
    'json' // <<< this is the dataType
  );
});

Now you should be able to access the data using the dot syntax:

console.log("last_name: " + element.last_name);
console.log("first_name: " + element.first_name);
console.log("id: " + element.id);

I would add another few lines, just to check that you're getting back what you expect to see:

console.log("NEW ELEMENT"); // << indicator in the console for your reference
console.log(element); // << the whole "element"

answered Nov 22, 2013 at 13:11

msturdy

10.9k11 gold badges44 silver badges53 bronze badges

5 Comments

melvnberd Over a year ago

Thanks for that code @msturdy, but im still getting the same error.. CONSOLE LOG IS: last_name: undefined 7:421 first_name: undefined 7:422 id: undefined 7:423 NEW ELEMENT 7:424 7 7:425 last_name: undefined 7:421 first_name: undefined 7:422 id: undefined 7:423 NEW ELEMENT 7:424 John 7:425 last_name: undefined 7:421 first_name: undefined 7:422 id: undefined 7:423 NEW ELEMENT 7:424 Doe

msturdy Over a year ago

ok, put a console.log(data) in at the beginning of the function() to check what you're getting back from the server...

melvnberd Over a year ago

Thank you very much for trying to help me out with this one.. I really appreciated it and I learned also something new from you.. The error on my part was Im using each method..!

melvnberd Over a year ago

by the way.. Object {id: 7, first_name: "John", last_name: "Doe"} was the product of console.log(data);

msturdy Over a year ago

aaah, then I was mistaken in my understanding.. I thought you would have more than one person in the JSON, and therefore looping through them! In which case the each() would be quite appropriate! :) glad you solved it!

Collectives™ on Stack Overflow

Display JSON Data in HTML using Laravel 4

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related