I'm having a hard time solving this problem.
Here's the code:
const postBox = document.querySelector('#posts')
const getUser = function(id, val) {
$.ajax({
type: 'GET',
url: `/api/user/${id}`,
success: function(response) {
val.innerHTML = `Posted by: ${response.username}`
},
error: function(error) {
console.log(error)
}
})
}
const getPosts = () => {
$.ajax({
type: 'GET',
url: '/api/posts/',
success: function(response) {
console.log(response)
response.forEach(el => {
postBox.innerHTML += `
${el.title}
${el.body}
${el.date}
`
const authorBox = document.querySelector(`#author${el.id}`)
console.log(authorBox)
getUser(el.author, authorBox)
})
},
error: function(error) {
console.log('error')
},
})
}
getPosts()
Only the last item has the "Posted by author"
I can't seem to figure out why only the last item has it. Even when I inspect it, it has the "Posted by author" inner html and inner text but it's not showing it.
here's the output:
Test 1
Test 1
2021-07-12
Test 2
Test 2
2021-07-12
Test 3
Test 3
2021-07-12
Test 4
Test 4
2021-07-12
Posted by: kyrios
How do I make sure that all of the authorBox has their inner html changed?
(edit)
This is the response from /api/posts/
Array(4) [ {…}, {…}, {…}, {…} ]
0: Object { id: 1, title: "Test 1", date: "2021-07-12", … }
1: Object { id: 2, title: "Test 2", date: "2021-07-12", … }
2: Object { id: 3, title: "Test 3", date: "2021-07-12", … }
3: Object { id: 4, title: "Test 4", date: "2021-07-12", … }
length: 4
each object is
author: 1
body: "Test 1"
category: 1
date: "2021-07-12"
id: 1
image: null
title: "Test 1"
I'm using the django rest framework generics ListViewApi.