JSON and jQuery listview

Question

Im trying to add rows(that will match the format) to listview from json (from the response):

results : { _id: 53f8c48ddc1f5f0419f2ed53,
  bName: 'Microsoft',
  phone: 35588319,
  Email: '[email protected]',
  field: 'QA',
  exp: '0-2',
  __v: 0,
  location: [ { longitude: 7.8, latitude: 7.8, _id: 53f8c48ddc1f5f0419f2ed54 } ] }end

and my table is :

<table summary="This table lists all the Jobs." cellpadding="40" cellspacing="40" vspace="40">
    <caption id = "jobsListView" >
        JOBS
    </caption>
    <thead>
        <tr>
            <th scope="col">Company Name</th>
            <th scope="col">Contact</th>
            <th scope="col">Email</th>
            <th scope="col">Field</th>
            <th scope="col">Exp</th>

        </tr>
    </thead>
    <tbody>
        <!-- every row = a row in the file 
        <tr>
            <th scope="row">Microsoft</th> // comapny name
            <td>0508558319</td> // contact
            <td>[email protected] (JFK)</td> // email 
            <td>QA (JFK)</td> // field 
            <td>0-2 (JFK)</td> // exp
        </tr>

       -->
    </tbody>
</table>

so bName = company name , phone = contact ... without the location .

and i send\rec by ajax :

$.ajax({
      type: 'GET',
      dataType: 'JSON',
      url:'http://localhost:3000/find',
      data: workerInfo, 
     success: function(jobs){
      }
    });

How to add rows to my table according to the json file ? (bName = company name , contact = phone ...) , just how to add rows to a listview. — Itsik Mauyhas
– Itsik Mauyhas, Commented Aug 25, 2014 at 9:24
Yes, but does the returning JSON has object of arrays i.e. [{},{}.{}]or only single object? {}? — Rahul
– Rahul, Commented Aug 25, 2014 at 9:29

Rahul · Accepted Answer · 2014-08-25 09:47:17Z

1

Suppose if the response is array of objects -

var $body = $("table tbody"); //select table (change ID / class if required anad locate to tbody)
$.ajax({
      type: 'GET',
      dataType: 'JSON',
      url:'http://localhost:3000/find',
      data: workerInfo, 
      success: function(response){ 
          var jobs = JSON.parse(response); //parse the response.
          $.each(jobs, function(j, e) { //every object represents row so iterate thru it
              //generate table row 
              var row='<tr>';
              row+='<td>'+e.bName+'</td>';
              row+='<td>'+e.phone+'</td>';
              row+='<td>'+e.Email+'</td>';
              row+='<td>'+e.field+'</td>';
              row+='<td>'+e.exp+'</td>';
              row+='</tr>';   
              $body.append(row); //Append it to tbody
          });
      }
});

And if the response is single object -

var $body = $("table tbody"); //select table (change ID / class if required anad locate to tbody)
$.ajax({
      type: 'GET',
      dataType: 'JSON',
      url:'http://localhost:3000/find',
      data: workerInfo, 
      success: function(response){ 
          var jobs = JSON.parse(response); //Parse the response
              //generate table row 
              var row='<tr>';
              row+='<td>'+jobs.bName+'</td>';
              row+='<td>'+jobs.phone+'</td>';
              row+='<td>'+jobs.Email+'</td>';
              row+='<td>'+jobs.field+'</td>';
              row+='<td>'+jobs.exp+'</td>';
              row+='</tr>';   
              $body.append(row); //Append it to tbody
      }
});

Hope it helped!

answered Aug 25, 2014 at 9:47

Rahul

5,7728 gold badges39 silver badges68 bronze badges

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

20 Comments

Itsik Mauyhas Over a year ago

still dont work .. i have tried to change the $body selector to var $body = $("#tbody"); the id on the <tbody id = "tbody"> , still with no results .

Rahul Over a year ago

Does $body = $("#tbody") find the object, try console logging it?

Rahul Over a year ago

Also, console log the row before append line.. tell me what it is!

Itsik Mauyhas Over a year ago

thats the console.log output : [tbody#tbody, prevObject: b.fn.b.init[1], context: document, selector: "tbody", jquery: "1.9.1", constructor: function…] 0: tbody#tbody context: document length: 1 prevObject: b.fn.b.init[1] selector: "tbody" proto: Object[0]

Rahul Over a year ago

can you try replacing var jobs = JSON.parse(response) with var jobs = response?

|

Collectives™ on Stack Overflow

JSON and jQuery listview

1 Answer 1

20 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

20 Comments

Your Answer

Sign up or log in

Post as a guest

Related