Question

我有一个对象数组，我使用$ .each遍历该对象，并尝试将数组对象值附加到<li>上。

请在下面找到jQuery

$(".sidebar").empty().append("<div>"+
  "<h5>Student Info</h5>" +
  "<ul>" +
     $.each(studentInfo, function (index, value) { 
        console.log(value.studentName + " :studentName ");//prints the student name in the browser console
        "<li>Student No " + index + "</li>" 
        "<li>Name - " + value.studentName + "</li>" 
        "<li>Contact - " + value.contact + "</li>"
        "<li>DOB - " + value.dob + "</li>"
        "<li>PAN - " + value.PANNo + "</li>"
        "<li>Address - " + value.postalAddress + "</li>"
      }) +
   "</ul>" +
 "</div>")

以上功能仅在[object Object],[object Object]中打印<li>。我尝试过对数组进行字符串化处理，对数组进行解析，以不同的方式添加json对象的方法，但仍然保持不变。

我要遍历的对象数组

var studentInfo = [
  {
   "studentName":"abc",
   "contact":"123456789",
   "dob":"22-05-1994",
   "PANNo":"ABCDEF1234",
   "postalAddress":"chandigarh, sector - 18"
  },
  {
   "studentName":"xyz",
   "contact":"123456987",
   "dob":"22-05-1994",
   "PANNo":"ABCDEF4321",
   "postalAddress":"chandigarh, sector - 78"
  }
]

我已经花了几个小时了，但是无法弄清楚我在做什么错，我仍然是jQuery及其新手。任何帮助都非常感谢。谢谢。

Answer 1

jQuery $.each()并不意味着返回字符串。您使用它分别对待每个对象。您不能将其解析为字符串表达式。

您需要将代码分成多个部分。

第1部分：清除.sidebar并将其准备好用于菜单项。

第2部分：构建一个字符串items，其中包含解析为HTML列表项的所有对象值。

第3部分：将字符串附加到“ .sidebar”

var studentInfo = [
  {
   "studentName":"abc",
   "contact":"123456789",
   "dob":"22-05-1994",
   "PANNo":"ABCDEF1234",
   "postalAddress":"chandigarh, sector - 18"
  },
  {
   "studentName":"xyz",
   "contact":"123456987",
   "dob":"22-05-1994",
   "PANNo":"ABCDEF4321",
   "postalAddress":"chandigarh, sector - 78"
  }
];

var items = "";
$.each(studentInfo, function (index, value) { 
        console.log(value.studentName + " :studentName ");
        items += "<li>Student No " + index + "</li>" 
                  + "<li>Name - " + value.studentName + "</li>" 
                  +  "<li>Contact - " + value.contact + "</li>"
                  + "<li>DOB - " + value.dob + "</li>"
                  + "<li>PAN - " + value.PANNo + "</li>"
                  + "<li>Address - " + value.postalAddress + "</li>" 
                  + "<hr>" ;
      })
 +

$(".sidebar").empty().append("<div>"+
  "<h5>Student Info</h5>" +
  "<ul>" + items  + "</ul></div>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="sidebar"></div>

每个对象无法将作为参数传递给jQuery的对象数组的值附加到html元素

1 个答案: