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
Rune1983 Guru
04. december 2020 - 10:50 #1
display.innerHTML += txt;
ejvindh Professor
04. december 2020 - 10:55 #2
Det er fordi du overskriver din "home"-div i hver gentagelse :)
ejvindh Professor
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.
ejvindh Professor
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';
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.
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

Opret Preview

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





Premium
IBM sætter flere navne på topledelsen for sit nye selskab 'NewCo'
Der er blevet sat navne på flere af de aboslutte topposter i IBM's nye driftsselskab, NewCo. Ind til videre fisker IBM inden for egne rækker.
Computerworld
Trump bønfalder Helle Thorning: Giv mig min Facebook-konto tilbage
Facebooks tilsynsråd, der har Helle Thorning-Schmidt i spidsen, har modtaget en erklæring fra Donald Trump, som ønsker at få genoprettet adgangen til sin Facebook og Instagram-konto.
CIO
Har du rost din mellemleder i dag? Snart er de uddøde - og det er et tab
Computerworld mener: Mellemledere lever livet farligt: Topledelsen får konstant ideer med skiftende hold i virkeligheden, og moden går mod flade agile organisationer. Men mellemlederen er en overset hverdagens helt med et kæmpe ansvar. Her er min hyldest til den ofte latterliggjorte mellemleder.
Job & Karriere
IBM Danmark trækker tilbud om frivillige fratrædelser tilbage for stort antal ansatte: "IBM har taget røven på sine ansatte"
Som led i IBM Danmarks store fyringsrunde fik 130 ansatte grønt lys til at forlade selskabet på en frivillig fratrædelsesordning. Men nu har IBM Danmark trukket det oprindelige tilbud tilbage for størstedelen af de ansatte.
White paper
Kunsten at navigere i en tilpasningsøkonomi
Evnen til at tilpasse sig en verden i konstant forandring bliver afgørende for virksomhedens mulighed for at vækste i fremtiden. Ét af de finansielle håndtag du kan skrue på, er en hel eller delvis outsourcing af it-driften. I e-bogen ”Kunsten at navigere i en tilpasningsøkonomi” får du viden om, hvordan din virksomhed kan bruge tilpasningsøkonomi til at håndtere fremtidens krav til it. Vi spørger blandt andet: - Kan din virksomhed skalere og tilpasse sin digitale kapacitet og økonomi? - Har dine kunder tillid til, at du har de skarpeste it-løsninger? - Ville I kunne styrke forretningen ved at give jeres it mere fokus? - Kan I få øget funktionalitet til samme pris? Vi fokuserer på risiko, økonomi, fokus og valg af it-partner, som er fire opmærksomhedspunkter du skal have styr på for at lykkes med at tilpasse virksomheden til at modstå forandringerne i verden.