Avatar billede delphiuser Mester
04. december 2020 - 10:28 Der er 5 kommentarer

Skal vise 12 poster men viser kun 1

Hej eksperter jeg har et spørgsmål.
Jeg har lavet et lille stykke javascript kode som henter noget data fra en api.
jeg skal have vist 12 poster. og i min console.log viser den fint 12 poster. men på html siden viser den kun 1 post. og der er den sidste. det er som om den lægger dem oven i hinanden. ved ikke hvordan jeg lige skal få det løst.

Her kommer min kode...

function posts() {
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(json => display12Posts(json))

    function display12Posts(data) {
        var display = document.getElementById("home");
        console.log(data);
        var postLenght = data.length;
        console.log('Array Længde: ' + postLenght);
        var i;

        for (i = 1; i <= 12; i++) {
            console.log('User ID: ' + data[i].userId);
            console.log('Title: ' + data[i].title);
            console.log('Post: ' + data[i].body);

            var txt = '<div class="box" id="post"><div class="box-header"><a href="profile.html/' + data[i].userId + '">' + data[i].title + '</a><button class="btn fa fa-plus" id="show"></button></div><br><p>' + data[i].body + '</p></div>\n\n';

            display.innerHTML = txt;
        }
    }
}

Håber i kan fortælle mig hvad jeg har gjort forkert. Jeg må ikke bruge jquery, det havde jeg startet ud med. Men fik afvide at det måtte jeg ikke bruge.

på forhånd tak for hjælpen...

Delphiuser
Avatar billede Rune1983 Ekspert
04. december 2020 - 10:50 #1
display.innerHTML += txt;
Avatar billede ejvindh Ekspert
04. december 2020 - 10:55 #2
Det er fordi du overskriver din "home"-div i hver gentagelse :)
Avatar billede ejvindh Ekspert
04. december 2020 - 10:56 #3
Ja, så enten skal du køre med Rune1983's løsning, eller også skal du oprette flere adskilte div'er, som du kan skrive til.
Avatar billede ejvindh Ekspert
04. december 2020 - 11:04 #4
I øvrigt bør du også få kigget på linjen, hvor du sætter txt-variablen, eftersom du i den nuværende form ender med at få 12 div'er med identisk ID. Så enten fjern ID angivelsen, eller sørg for at de alle er unikke. Fx sådan her:

var txt = '<div class="box" id="post'+i+'"><div class="box-header"><a href="profile.html/' + data[i].userId + '">' + data[i].title + '</a><button class="btn fa fa-plus" id="show'+i+'"></button></div><br><p>' + data[i].body + '</p></div>\n\n';
Avatar billede Slater Ekspert
04. december 2020 - 12:47 #5
"Jeg må ikke bruge jquery, det havde jeg startet ud med. Men fik afvide at det måtte jeg ikke bruge."

Det var da en fornuftig person der har sagt det ;)

Hvis du endelig skulle bruge et library til dette, ville det give meget mere mening med et reaktivt framework som f.eks. Vue. Der kunne dette gøres meget nemmere og mere lækkert. jQuery giver ingenting her.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester