0

Estoy realizando el consumo de una api la cual los datos generados los quiero mostrar en mi html, para eso estoy realizando la creación de elementos div mediante javascript, al momento de mostrar la información lo hace sin problemas, pero estoy teniendo un inconveniente y es que cada vez que actualizo la pagina los datos los muestra en orden diferente, es decir, si tengo 3 div el div que estaba de primero ahora aparecerá de ultimo y así va cambiando el orden cada vez que actualizo la pagina:
Este es mi codigo Javascript:

const cargar_noticias_recientes = async () => {
    const noticias_recientes = document.querySelector('#pnl-body-content-card-reci');
    const res = await fetch(`WebService_Default.asmx/cargar_card_noticia_recientes`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: ''
    });
    const datos = await res.json();
    let nuevos = [...datos.d];
    nuevos.map(async nuevo => {
        const div = document.createElement('div');
        const peticion = await fetch(`http://localhost:51482/api/values/${nuevo[3]}`, {
            method: 'GET'
        });
        const imagen = await peticion.blob();
        const url = URL.createObjectURL(imagen);
        div.innerHTML = `
            <div class="body-card body-card-reci ${nuevo[0]}">
                <div class="card-title">
                    <span>Nuevo</span>
                </div>
                <div class="img-card">
                    <div class="img" style="background-image: url(${url});"></div>
                </div>
                <div class="content-card">
                    <p>
                        <i class="fas fa-tags"></i> ${nuevo[1]}
                    </p>
                </div>
            </div>
        `
        noticias_recientes.appendChild(div);
    });
}

1 respuesta 1

0

Si solo quieres hacerlo con javascript, usa localstorage.

localStorage.setItem("key", "value"); // guardo el valor

const body = document.querySelector("body").innerHTML; 
let value = localStorage.getItem("key"); // let value = "value";

if(value === "value"){
  body = `
  <article style="display: grid; place-items:center; width: 200px; height: 100px; background:#000;">
   <text style="font-size: 15px;"> Valor guardado en localStorage </text>
  </article>`
}else{
  console.log("No está guardado en localStorage")
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.