CODEWITHSUNDEEP
phpajaxjsonlaravel-4
melvnberd
melvnberd

Reputation: 3163

Display JSON Data in HTML using Laravel 4

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

Upvotes: 1

Views: 1379

Answers (2)

Qullbrune
Qullbrune

Reputation: 1945

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);

  });
});

Upvotes: 3

msturdy
msturdy

Reputation: 10794

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"

Upvotes: 2

Related Questions