Jquery 从 html 拉取 json 数据

Question

I added a data to html via NodeJS Express, and with.setHeader, I got the html title as json. Pull data from html in JS file and send it to another html file only as title for each title.

There is the JavaScript code,

$(document).ready(function () {
    $.get("/admin/getposts", null, function (data) {

       // Main bir div oluşturmak
        $(".postsMain").html("");

        $.each(data, function (i, item) {
          
        // Div 2 için html ayarlamak
        var html += "<div class='postsAlt'>";
            html += "<p>" + i.title + "</p>"
            html += "</div>";

            // Div 2'leri div1 lere aktarmak
            $(".postsMain").append(html);
        });

    }, "json").done(function() {
      console.log('Başarıyla data çekildi') 
    }) 
});

There is the pull data in NodeJS

app.get("/admin/getposts", (req, res) => {
  let titles = [];
  Object.entries(postData.all()).forEach((entry) => {
    const [ID, data] = entry;
    titles.push(data.data)
  });


  res.setHeader('Content-Type', 'application/json')
  res.send(JSON.stringify(titles));
});

Answer 1

Some corrections to your code.

$(function () {
  $.getJSON("/admin/getposts", function (data) {
    $(".postsMain").empty();
    $.each(data, function (i, item) {
      var alt = $("<div>", {
        class: "postsAlt"
      }).appendTo(".postsMain");
      $("<p>").html(item.title).appendTo(alt);
      console.log('Başarıyla data çekildi'); 
    });
  });
});

In your Each loop, you used i for the Index and item for the Value. So i.item should have thrown an error about being undefined. I switched it to item.title which should give the proper detail.

I also updated the code to use jQuery to create the new HTML Elements.