Динамическое заполнение данных в теге li с использованием Javascript

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> и выполнить цикл над вторым для первого цикла и первым для второго, или написать один цикл, который объединяетСтроки из двух объектов.