ajax中itemtexts,javascript - Only the last item has the text in an ajax call - Stack Overflow

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.