Question

我在AJAX方法中使用foreach时遇到问题。我将列表从Test控制器传递给所述AJAX方法。我使用Append()创建自定义内容，但无法列出所有课程。

 $.post("/Home/Test", { "id": id },
     function (data) {
         if (data) {    

             $("#testDiv").append($('<div class=\"studentInfo\"> ' +
             '<br/> ' +
              <b>Student: </b>' + data.FirstName + " " + data.LastName +
              '<br/>' +
              '<b>School: </b>' + data.SchoolName +
              '<br/>' +
              '<b>All courses: </b>' 

               //How to "foreach" all course inside "data.Courses"? 

               +'</div>'));

         }
    });

Answer 1

使用此示例代码：

示例代码：

HTML：

<table id="idOfmyTable">
        <thead>
        <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
</table>

使用Javascript：

function getAllRecords(rootPath) {
    $.getJSON(rootPath , function(response) {
        $("#idOfmyTable").find('tbody').empty(); // Added to remove "No data available in table" message in first row after loading data
        $.each(response, function(idx, obj) {

            var body = "<tr>";
            body    += "<td>" + obj.column1 + "</td>";
            body    += "<td>" + obj.column2 + "</td>";
            body    += "<td>" + obj.column3 + "</td>";
            body    += "<td>" + obj.column4 + "</td>";
            body    += "</tr>";
            $( "#idOfmyTable tbody" ).append(body);
        });

        $('#idOfmyTable').DataTable();
    });
}

Answer 2

使用相同的机制，只需遍历您的课程，为每个课程生成html，将其附加到变量，然后将其包含在最后。

$.post("/Home/Test", {
  "id": id
},
function(data) {
  if (data) {

    var courses = '';

    data.Courses.forEach(function(course) {
      courses += '<b>' + course + '</b>';
    });

    $("#testDiv").append($('<div class=\"studentInfo\"> ' +
          '<br/> ' +
          < b > Student: < /b>' + data.FirstName + " " + data.LastName +
          '<br/ > ' +
          ' < b > School: < /b>' + data.SchoolName +
          '<br/ > ' +
          ' < b > All courses: < /b>' + courses

           +'</div > '));

     }
});

Answer 3

基本操作：

 $.each(data.Courses, function (index, item)
  {
    var yourCurrentCource= item;
  })

在你的情况下它应该是这样的。

$.post("/Home/Test", { "id": id },
    function (data) {
        if (data) {
            //Generate Cource HTML
            var allCources;
            $.each(data.Courses, function (index, item) {
                allCources += '<b>' + item + '</b>'; // generate html string here
            })

            $("#testDiv").append($('<div class=\"studentInfo\"> ' +
            '<br/> ' +
             '<b>Student: </b>' + data.FirstName + " " + data.LastName +
            '<br/>' +
            '<b>School: </b>' + data.SchoolName +
            '<br/>' +
            '<b>All courses: </b>' + allCources
             + '</div>'));

        }
    });

如何在Ajax / JQuery中使用Each（）作为重新调整的列表？

3 个答案: