Estaba tratando de imprimir diferentes títulos obtenidos por jsonplaceholder en diferentes tarjetas usando jquery y javascript

Aquí está la sección 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>

Aquí está la 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();


Pero el resultado que obtengo es el mismo título para las tres cartas diferentes, perdón por el largo html: D

0
Fabrizio Piperno 25 sep. 2019 a las 14:08

3 respuestas

La mejor respuesta

El problema es que su código actualiza todas las tarjetas simultáneamente en cada iteración y, por lo tanto, lo que ve al final es el título de la lista en todas las tarjetas. Simplemente puedes hacer esto:

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

Aunque esta no es la mejor manera, ya que siempre consulta el DOM. Una optimización sería almacenar la colección de tarjetas en una variable:

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

for (let i = 0; i < data.length; i++) {
    cards.eq(i).html((data[i]["title"]));
} 
1
Slim 25 sep. 2019 a las 11:14

Hay dos problemas en tu lógica. En primer lugar, está disminuyendo i cuando se repite, lo cual está bien si retrocede a través de la matriz, pero está tratando de avanzar, así que use i++.

En segundo lugar, debe usar eq() para obtener el elemento específico .card-text por su índice. Su lógica actual sobrescribiría todos los elementos en cada iteración del bucle. Prueba esto:

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>

Llevando esto un paso más allá, te sugiero que construyas los elementos .card-text dinámicamente en lugar de codificarlos, de lo contrario tendrás problemas si la API devuelve algo más que 3 objetos en la matriz.

0
Rory McCrossan 25 sep. 2019 a las 11:14
<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));
}    

Está utilizando el mismo nombre de clase, por lo que solo el nombre de la clase de diferencia resolverá el problema

0
jual ahmed 25 sep. 2019 a las 11:20