使用Javascript动态填充li标记中的数据

Question

正在开发一个应用程序，其中的Javascript中包含一些数据我从后端拉出的对象。数据位于2个单独的对象中。在尝试遍历每个对象并动态地在DOM中填充时，第一个数组填充良好，但是第二个数组却无法正常工作。

请帮助？

浏览器控制台中的对象

//1st Object
const subject = {
      0: "Mathematics",
      1: "English",
      2: "Swahili",
      3: "Science"
};

//2nd Object
const value = {
      0: "90%",
      1: "70%",
      2: "50%",
      3: "85%"
};

我的逻辑

//Logic to loop through 1st Object
 $("#packageBenefits ul li");
    $.each(subject, function (key, value) { 
        $details.eq(key).text(value);
});

//Logic to loop through 2nd object
$('#packageBenefits ul li >span').each(function(index) {
      $(this).html(value[index]);
});

标记

 <div class="card">
      <div class="card-header">All subjects</div>
      <div class="card-body" id="packageBenefits">
        <ul>
          <li> Subject <span> </span> </li>
          <li> Subject <span> </span> </li>
          <li> Subject <span> </span> </li>
          <li> Subject <span> </span> </li>
        </ul>
      </div>
    </div>

Answer 1

第一个循环用新文本替换<li>元素的内容。这将替换<li>元素的全部内容。

第二个循环循环遍历<span>元素内的所有<li>元素，但是没有任何，因为第一个循环只是替换了它们。

您可以将另一个<span>放在<li>内，然后在第二个循环中进行第一个循环，在第一个循环中进行第二个循环，或者编写一个将两个对象的字符串连接在一起的循环。