javascript - Repeating appended html with json data included -

this bit of learning exercise me please excuse code present. sure better. in following code see have created variable pulling in formatted json data. then, creating function appends block of html. within append, referencing specific pieces of json data displayed.

html

<table id="jobsearchresults" bgcolor="white" style="border: 1px solid #ddd;width:100%;">   <tbody>     </tbody>  </table> 

javascript

var json = (function () {             var json = null;             $.ajax({                 'async': false,                 'global': false,                 'url': "../data/jobsearchresults.json",                 'datatype': "json",                 'success': function (data) {                     json = data;                 }             });             return json;         })();   $(jobsearchresults).each(function(index, element){   $('#jobsearchresults').append('<tr><th><div style="background-color:#ddd;height:55px;width:80px;"><img src="" style="height:55px;width:80px;"></div></th><td><h4 style="margin-top: 0;margin-bottom: 2px;font-size: 16px;"> '+json[0].job_header+' </h4> '+json[0].specialty_name+', '+json[0].facility_name+' </td><td><h4 style="margin-top: 0;margin-bottom: 2px;font-size: 16px;"> '+json[0].city+',  '+json[0].state_name+' </h4> united states </td><td class="text-right"></td></tr>');        }); 

now, need complicate matters making table row repeat x number of times , have json record number increment each new row. in case, both interested in how take have written , expand on include new functionality , interested in more concise way approach problem have been had written more efficiently.

the callback function jquery's each passed 2 values. represent index , value of current iteration, respectively. can use either of these reference original json data , output each row accordingly.

the $.each() function can used iterate on collection, whether object or array. in case of array, callback passed array index , corresponding array value each time.

$.each( obj, function( key, value ) {   alert( key + ": " + value ); }); 

in example below, i'm iterating on json variable, contains json data returned ajax call. in context, use index reference current iteration (e.g. json[index].job_header) or use value directly (e.g. job.job_header).

function displaydata(json) {        var $resultdisplay = jquery('#jobsearchresults tbody');        if (!json) {              // variable false. there ajax error.      $resultdisplay.html('<tr><td>there error.</td></tr>');            } else if (jquery.isemptyobject(json)) {              // variable empty object. no records returned.      $resultdisplay.html('<tr><td>no data display.</td></tr>');            } else {            // display returned records.      $resultdisplay.empty();      jquery.each(json, function(index, job) {        $resultdisplay.append('<tr>' +          '<td><div class="row-img"><img src="" alt=""></div></td>' +          '<td><h4>' + job.job_header + '</h4>' + job.specialty_name + ', ' + job.facility_name + '</td>' +          '<td><h4>' + job.city + ',  ' + job.state_name + ' </h4>united states</td>' +          '</tr>');      });          }      }    jquery.ajax({      'url': "https://epearson001.github.io/prototype-web-application/assets/data/jobsearchresults.json",      'datatype': "json"    })    .done(function(data) {      displaydata(data);    })    .fail(function() {      displaydata(false);    });

#jobsearchresults {    border: 1px solid #ddd;    width: 100%;    background-color: white;  }  div.row-img {    background-color: #ddd;    height: 55px;    width: 80px;  }  div.row-img img {    height: 55px;    width: 80px;  }  h4 {    margin-top: 0;    margin-bottom: 2px;    font-size: 16px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="jobsearchresults">    <tbody>      <tr>        <td>loading data...</td>      </tr>    </tbody>  </table>

---

edit

i notice you're setting async false in ajax call. defeats asynchronous functionality of ajax and, unless there's particular reason so, advise against it. i've restructured example use callback function, data displayed after returned asynchronous ajax call. added bit of error handling. acknowledge might not appropriate particular context, thought i'd offer idea.