Как мне распечатать разные названия на разных карточках, используя API?

Question

Я пытался напечатать разные заголовки, полученные jsonplaceholder, на разные карточки, используя jquery и javascript

вот раздел HTML:

<div class="album py-5">
                <div class="container">
                  <div class="row">
                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">
                        <div class="card-body">
                          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">
                        <div class="card-body">
                          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="card mb-4 box-shadow">     
                        <div class="card-body">
                          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                          <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

вот JS:

//starts at 14:43, sat 21/9/2019

//jsonph

const url = 'https://jsonplaceholder.typicode.com/todos?_limit=3';

async function getDataFromCinemasAPI() {
    const response = await fetch(url);
    const data = await response.json();

    for (let i = 0; i < data.length; i--) {
        $('.card-text').html((data[i]["title"]));
    }    
}

getDataFromCinemasAPI();

но результат, который я получаю, - это одно и то же название для трех разных карт, извините за длинный HTML: D

Answer 1

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

$('.card-text').eq(i).html((data[i]["title"]));

Хотя это не лучший способ, так как вы всегда запрашиваете DOM.Оптимизация будет заключаться в хранении коллекции карт в переменной:

let cards = $('.card-text');

for (let i = 0; i < data.length; i++) {
    cards.eq(i).html((data[i]["title"]));
} 

Answer 2

<div class="album py-5">
            <div class="container">
              <div class="row">
                <div class="col-md-4">
                  <div class="card mb-4 box-shadow">
                    <div class="card-body">
                      <p class="card-text1">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-md-4">
                  <div class="card mb-4 box-shadow">
                    <div class="card-body">
                      <p class="card-text2">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-md-4">
                  <div class="card mb-4 box-shadow">     
                    <div class="card-body">
                      <p class="card-text3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>













for (let i = 0; i < data.length; i++) {
    $('.card-text'+i).html((data[i].title));
}    

вы используете одно и то же имя Calss, так что только у вас есть имя класса разницы, проблему решит

Answer 3

В вашей логике есть две проблемы.Во-первых, вы уменьшаете i при цикле, что хорошо, если вы идете назад по массиву, но вы пытаетесь идти вперед, поэтому используйте i++.

Во-вторых, вам нужно использоватьeq() чтобы получить конкретный элемент .card-text по его индексу.Ваша текущая логика будет перезаписывать все элементы в каждой итерации цикла.Попробуйте это:

const url = 'https://jsonplaceholder.typicode.com/todos?_limit=3';

async function getDataFromCinemasAPI() {
  const response = await fetch(url);
  const data = await response.json();

  for (let i = 0; i < data.length; i++) {
    $('.card-text').eq(i).html(data[i]["title"]);
  }
}

getDataFromCinemasAPI();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="album py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="card mb-4 box-shadow">
          <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
              <div class="btn-group">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card mb-4 box-shadow">
          <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
              <div class="btn-group">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card mb-4 box-shadow">
          <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
              <div class="btn-group">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Если пойти дальше, я бы посоветовал вам динамически создавать элементы .card-text вместо их жесткого кодирования, иначе у вас возникнут проблемы, если API когда-либо возникнет.возвращает что угодно, кроме 3 объектов в массиве.