如何在循环中将json数据显示为HTML

Question

I have to show some json data to html page in a list below is my jquery code

var u_Name, u_Mobile, u_lat, u_lang, driver_ID;

function fetchEnquiry(driverid) {
    jQuery.ajax({
        url: baseurl + "fetchenquiry.php",
        data: 'driverid=' + driverid,
        type: "POST",
        success: function (response) {
            response = $.trim(response);
            if (response == "NO Enquiry") {
                console.log(response);
            } else {
                var enquiryDet = jQuery.parseJSON(response);

                jQuery(enquiryDet).each(function (index, element3) {
                    u_Name = element3.name;
                    u_Mobile = element3.mobile;
                    u_lat = element3.location_lat;
                    u_lang = element3.location_lang;
                    driver_ID = element3.driver_id;
                    $.each(enquiryDet, function (i, item) {
                        $('.notifications_show').html(enquiryDet[i].name);
                    });
                });
            }
        },
        error: function () {}
    });
}

HTML CODE

 <div class="notifications_show">

            </div>

It is showing me only one last result.

Please Help!

Answer 1

On this part:

$.each(enquiryDet, function (i, item) {
      $('.notifications_show').html(enquiryDet[i].name);
});

You're replacing the full html of the result element.

You would need to use .append() to add more values, instead of replacing the current ones.

Like this:

$.each(enquiryDet, function (i, item) {
      $('.notifications_show').append(enquiryDet[i].name);
});

---

Edit

As mentioned in the comments, you should add a $('.notifications_show').empty() before the .each to clear the current results in the target div.

Answer 2

Just use .append instead of .html:

$.each(enquiryDet, function (i, item) {
      $('.notifications_show').append(enquiryDet[i].name);
});

Answer 3

change this :

$.each(enquiryDet, function (i, item) {
  $('.notifications_show').html(enquiryDet[i].name);
});

to this:

 $('.notifications_show').empty();//flush content before adding new content
  $.each(enquiryDet, function (i, item) {
   $('.notifications_show').append(enquiryDet[i].name);
 });

html replace the content of selected element and append appends(at last) in the selected element.

Answer 4

Use a variable and append the text to it then append it to the .notifications_show div

var text = '';
 $.each(enquiryDet, function (i, item) {
                       text+=enquiryDet[i].name;
                    });
$('.notifications_show').html(text);