Display JSON data into a table with pagination headers

Question

Good day!

How can I display my JSON Data into a table? this is the json data that im getting..

{"total":1,"per_page":6,"current_page":1,"last_page":1,"from":1,"to":1,
"data":{"id":999,
   "firstName":"user999",
   "lastName":"lastname999",
   "middleName":"middlename999",
   "company":"999 Company",
   "email":"[email protected]",
   "phone":"09063330756",
   "addressStreet":"999 Street",
   "addressCity":"999City",
   "addressProvince":"999Province",
   "addressPostalCode":2147483647,
   "status":null,
   "notes":"Supplier999"}]
}

for now Im just trying to figure out how to display my data into the table.. then after that I'll try to paginate it, by the way Im using an AJAX call.

here is my ajax code:

function search(){


var keyWord = $("#searchSupplier").val();
$.ajax({
    url: 'api/searchSupplier',
    type: 'get',
    data: {searchKey: keyWord},
    success: function(response) {

        $('table#supplierTable tbody').html("<tr><td>"+response.data+"</td></tr>");
    }
});
}

I tried to:

console.log(response.data) = undefined

and

console.log(response) = the JSON data above.

here is my laravel code:

public function getSuppliers()
{
   $input = Input::get('searchKey');
   return Supplier::where('firstName', 'like', '%'.$input.'%')->paginate(6)->toJson();
}

Thanks in advance.

The response should be useable as an object rather than text...add dataType='json' — Snowburnt
– Snowburnt, Commented Jan 21, 2014 at 14:37
thanks for that comment @Snowburnt, how can I make it useable as an object? sorry I have no idea how to do it. :/ — melvnberd
– melvnberd, Commented Jan 21, 2014 at 14:40
sorry, if you add dataType='json' to the ajax settings the success callback parameter will be a javascript object and you should be able to use it as a mulitdimensional keyed array — Snowburnt
– Snowburnt, Commented Jan 21, 2014 at 14:43
@Snowburnt Thank you very much for your Help, thats what Im missing on my code. — melvnberd
– melvnberd, Commented Jan 21, 2014 at 20:38

Peter Herdenborg · Accepted Answer · 2014-01-21 14:45:49Z

4

If you're going to do this manually, you need to do something like this:

success: function(response){
  var html = '<table><tbody>';
  response.data.forEach(function(row){
    html += '<tr><td>' + row.id + '</td><td>' + row.firstName + ...;
  });
  html += '</tbody></table>';
  //Set some elements innerHTML to html, or create the table some other way
}

If the server serves the JSON properly, jQuery will automatically parse it to a javascript object that you can access in the above fashion.

answered Jan 21, 2014 at 14:45

Peter Herdenborg

5,9821 gold badge23 silver badges22 bronze badges

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

3 Comments

melvnberd Over a year ago

Thanks @Peter for your answer, But Im getting an undefined error on "response.data". when I tried to console.log(response) then I get the whole json data, Im able to access it through dot notation. Sorry for the late response, I had trouble on my internet

melvnberd Over a year ago

I made it working already, Im just need to put dataType: json then I can use the dot notation already, I also used your code and its working. Thank you very much and have a good day

Peter Herdenborg Over a year ago

I'm glad I could be of help. If the server sends the JSON with the correct MIME type, application/json, jQuery should be able to detect this and default to parsing the response as an object (or array, in other cases). Since you had to specify dataType, I'm guessing the server sets the wrong MIME when responding.

user3206210 · Accepted Answer · 2014-01-21 14:43:02Z

2

Use the datables plugin, it's open source and easy to use.

http://datatables.net/

answered Jan 21, 2014 at 14:43

user3206210

611 bronze badge

2 Comments

melvnberd Over a year ago

Thanks for the link :) Im researching on how to implement this on my code. :)

Zeon Over a year ago

Did you ever look into impementing this @melvnberd?

Collectives™ on Stack Overflow

Display JSON data into a table with pagination headers

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related