Itsik Mauyhas
Itsik Mauyhas

Reputation: 3984

JSON and jQuery listview

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

Upvotes: 1

Views: 68

Answers (1)

Rahul
Rahul

Reputation: 5774

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!

Upvotes: 1

Related Questions