How would I iterate over an object and append the key values to the DOM fetch-CodePudding

Say I fetch a json with an array of objects, how would append those to the dom? like image and properties

CodePudding user response：

fetch("http://localhost:3000/images")
.then(res => res.json())
.then(data => {
    const img = document.querySelector('.image')
    const title = document.querySelector('.title')
    const likes = document.querySelector('#like-count')
    //set the element with the id of like-count to the amount of likes from the api
    likes.textContent = `${data[0].likes} likes`
    //sets the image of the div to the image src
    img.src = "./assets/coder-dog.png"
    //assign text content equal to the 0th index of the object in the array
    title.textContent = data[0].title
    //like feature
    let like = document.getElementById("like-button")
    let counter = `${data[0].likes}`

    like.addEventListener('click', (e) => {
        counter  ;
        likes.textContent = counter   " likes"
    })
})



fetch("http://localhost:3000/comments")
.then(res => res.json())
.then(data => {
    const commentUI = document.querySelector(".comments")
    document.querySelectorAll('li').forEach(element =>  element.remove())
    data.forEach(comment => {
        let newContent = document.createElement('li')
        newContent.textContent = comment.content;
        commentUI.appendChild(newContent)
    })
})

const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
    e.preventDefault();
    const commentLi = document.createElement('li')
    commentLi.textContent = e.target.elements[0].value;
    console.log(e)
    const commentList = document.querySelector('#comments-list');
    commentList.appendChild(commentLi);
})

CodePudding user response：

//totalVotes is declared globally so this variable can be initialized to the default vote count based on the db.json (see line 24)
let totalVotes;

//get request to the db.json
fetch("http://localhost:3000/characters")
.then(resp => resp.json())
.then(data => {
    console.log(data);

    //lines 11 thru 16, deliverable 1
    //to render all the names of the characters on the top of the webpage
    const characterBar = document.getElementById("character-bar");
    data.forEach(character => {
        const characterBarName = document.createElement("span");
        characterBarName.textContent = `${character.name}`;
        characterBar.appendChild(characterBarName);

        //lines 20 thru 25, deliverable 2
        //when one name on the top of the webpage is clicked, it will display the name, image, and vote count of the character
        characterBarName.addEventListener("click", () => {
            document.getElementById("name").textContent = character.name;
            document.getElementById("image").src = character.image;
            document.getElementById("vote-count").textContent = character.votes;
            totalVotes = character.votes;
        })
        //lines 27 thru 30, OPTIONAL STRETCH DELIVERABLE, RESET BUTTON
        document.getElementById("reset-btn").addEventListener("click", () => {
        totalVotes = 0;
        document.getElementById("vote-count").textContent = totalVotes;
        })
    })

})

//lines 37 and onwards, deliverable 3
//allow user to submit a number in the form, the votes will accumulate additively everytime a number is submitted
document.getElementById("votes-form").addEventListener("submit", event => {
    event.preventDefault();
    //parseInt is used so the votes on the webpage do not concatenate but add up mathematically
    //if no parseInt is used: 12 13=1213
    //if parseInt is used: 12 13=25
    totalVotes = totalVotes   parseInt(event.target.elements[0].value);
    document.getElementById("vote-count").textContent = totalVotes;
    document.getElementById("votes-form").reset();`enter code here`