Измените текст элемента, получив значение от респона AJAX

Question

Я не уверен, что мой подход верен, но моя цель состоит в том, чтобы сделать запрос, и как только ответ получен, все элементы, соответствующие определенному имени класса, сохраняются, и затем текст каждого элемента изменяется на результат из ответа.

Сценарий:

$(document).ready(function() {
  $("#calendarBtn").click(function() {
    $("#calendar").show();
    $.ajax({
      url: "http://localhost:8000/calendar",
      success: function(result) {
        //Store elements
        var elems = document.getElementsByClassName("ei_Title");
        // Convert the NodeList to an Array
        var arr = jQuery.makeArray(elems);
        //iterate through each element
        $.each(arr, function(index, val) {
          //iterate through ajax response
          $.each(result, function(key, value) {
            console.log(key, value);
            var title = (result[key].title);
            //This is where I'm unsure as to how I set 
            the text of the element in "arr"
            to the "title"
            variable
          });
        });
      }
    });
  });
});

HTML:

 <div class="calendar_events">
        <p class="ce_title"></p>
        <div class="event_item">
          <div class="ei_Dot dot_active"></div>
          <div class="ei_Title"></div>
          <div class="ei_Copy"></div>
        </div>

Ответ:

{id: 6, title: "Walk the dog", date: "2018-12-05", assigned_to: "Sam", time: "11:00:00"}
assigned_to: "Sam"
date: "2018-12-05"
id: 6
time: "11:00:00"
title: "Walk the dog"

Answer 1

Вам нужен только один цикл для прохождения ответа Ajax.Затем, используя цикл index, вы можете получить объекты json и использовать значения для установки текста «совпадающих» элементов.

success: function(result) {
  var elems = $(".ei_Title");

  //iterate through ajax response
  $.each(result, function(index, val) {

    // Set the title of each .ei_Title using the loop index.
    elems.eq(index).text(result[index].title);

  });
}

Обратите внимание, что «совпадение» - это просто порядоккак json-объекты, так и элементы.

Если вы используете FullCalendar (который я считаю самым популярным плагином для календаря), существует наиболее эффективный способ передать его с помощью json.См. документацию .