Loop in ajax results and replace all elements with id

Question

I want to loop for every object in ajax response and append and html with this data to an html div with id #jobs.

$.ajax({
  url: '/browse_jobs',
  data: {
    'keyword': keyword,
  },
  dataType: 'json',
  success: function(data) {
    if (data) {
      $.each(data.data, function(k, v) {
        $("#jobs").replaceAll(`
                    <div id="jobs" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                <div class="emply-list box">
                                    <div class="emply-list-thumb">
                                        <a href="/company/{{i.slug}}" title="">
                                                <img src="/media/${data.data.fields.logo}" width="80" height="80">
                                        </a>
                                    </div>
                                    <div class="emply-list-info">
                                        <h3><a href="/company/{{i.slug}}" title="">${data.data.fields.title}</a></h3>
                                        <span>Accountancy, Human</span>
                                        <h6><i class="la la-map-marker"></i> ${data.data.fields.city}, ${data.data.fields.country}</h6>
                                    </div>
                                </div>
                            </div>
                `);
      });
    }
  }
});

And when I do this it only change the first div with id jobs.

https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute Don't do this. Ids are expected to be unique in the DOM by web standards. Use a class instead. — Taplar, Aug 20 '18 at 17:01
In each iteration you are replacing the content of your #jobs div. So each time you are replacing the previous iteration. I think you'll want to use $.append instead of $.replaceAll. — KDot, Aug 20 '18 at 17:03
What about adding a variable to the id - something like id="jobs.{{i}}" ? That would then allow you to use id but still have them unique. — Mhluzi Bhaka, Aug 20 '18 at 20:32

score 0 · Answer 1 · answered Aug 20 '18 at 17:09

Don't duplicate ids. Instead, put an id on the area the jobs need to be put. Maybe make that jobs. Then each of your elements can have a class of job, which makes semantic sense.

Also, you can use map to build all your elements, and then append them to the DOM, reducing the number of operations you perform to the DOM to 1 or 2.

var jobs = $.map(data.data, function(v, k) {
  return `
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 job">
      <div class="emply-list box">
        <div class="emply-list-thumb">
          <a href="/company/{{i.slug}}" title="">
            <img src="/media/${data.data.fields.logo}" width="80" height="80">
          </a>
        </div>
        <div class="emply-list-info">
          <h3>
            <a href="/company/{{i.slug}}" title="">${data.data.fields.title}</a>
          </h3>
          <span>Accountancy, Human</span>
          <h6>
            <i class="la la-map-marker"></i>
            ${data.data.fields.city}, ${data.data.fields.country}
          </h6>
        </div>
      </div>
    </div>`;
});

$('#jobs').empty().append(jobs);

<span id="jobs">
</span>

That depends entirely on how the objects are constructed and what you want off of them. Can you put an example of your results in your question? You could also `console.log(k, v)` in your loop to see exactly what they look like. Your template literal is using `{{i.slug}}` but I don't see `i` defined any where. — Taplar, Aug 20 '18 at 17:17

Loop in ajax results and replace all elements with id

1 Answers1