Ajax json display data correctly

Question

I'm trying to display the data from json in my HTML. It doesn't seem to get the data properly. I'm running it on my localhost so I can see the json properly. here on my demo, the json is hosted on my personal FTP.

How can I display the data in my HTML?

$(function() {
  ajaxJS();
  function ajaxJS(e) {
    if (e) {
      e.preventDefault();
    }
    $.ajax({
      url: "http://www.domenghini.com/sample-data.json",
      method: "GET",
      success: function(data) {
        console.log(data);
        var html_to_append = '';
        $.each(data.items, function(i, items) {
          html_to_append +=
            '<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' +
            name.first +
            '<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' +
            name.last +
            '</p></div><img  class="image img-fluid" src="' +
            picture +
            '" /><p class="company">' +
            company +
            '</p></div>';
        });
        $("#items-container").html(html_to_append);
      },
      error: function() {
        console.log(data);
      }
    });

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
	<div id="items-container" class="row"></div>
</div>

what is your response data? show us. data.items is important here to answer your question — Dinesh undefined
– Dinesh undefined, Commented Jun 15, 2017 at 12:09
error: function(err) { console.error(err.statusText); } fyi — roberto tomás
– roberto tomás, Commented Jun 15, 2017 at 12:15

Dinesh undefined · Accepted Answer · 2017-06-15 12:20:21Z

1

I think the issue is you are trying to access name.first name.last in $.each without specifying items.name.first

$(function() {
  ajaxJS();
  function ajaxJS(e) {
    if (e) {
      e.preventDefault();
    }
    $.ajax({
      url: "http://www.domenghini.com/sample-data.json",
      method: "GET",
      success: function(data) {
        console.log(data);
        var html_to_append = '';
        $.each(data, function(i, item) {
          html_to_append +=
            '<div class="col-3 mb-3"><div class="name text-left pb-1 text-uppercase"><p>' +
            item.name.first +
            '<div class="col-3 mb-3"><div class="last text-right pb-1 text-uppercase"><p>' +
            item.name.last +
            '</p></div><img  class="image img-fluid" src="' +
            item.picture +
            '" /><p class="company">' +
            item.company +
            '</p></div>';
        });
        $("#items-container").html(html_to_append);
      },
      error: function() {
        console.log(data);
      }
    });

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
	<div id="items-container" class="row"></div>
</div>

edited Jun 15, 2017 at 12:20

answered Jun 15, 2017 at 12:12

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

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

5 Comments

Guillaume Over a year ago

And the parameter for the $.each() function must be just data not data.items.

Dinesh undefined Over a year ago

@user3699998 we asked you to show us what is data? without showing us how can we answer your question? by imagination only i answered now. would yourplease show us what data has?

zken Over a year ago

@Dinesh you can see datas from his API : domenghini.com/sample-data.json. @user3699998, as @Guillaume said, replace data.itemsby data, then made the changes with @Dinesh post.

DDfrontenderLover Over a year ago

there's a CORS error with my server, but locally works fine, just the datas aren't showing

Dinesh undefined Over a year ago

@user3699998 accept the answer please and upvote. thanks

Collectives™ on Stack Overflow

Ajax json display data correctly

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related