javascript for loop error uncaught type error on .length

I am currently doing a school assignment. The objective is to make a simple social network posting app using Django and JavaScript. JavaScript is used in order to dynamically load posts on the web page and replace HTML parts. I was following a a YouTube lesson https://youtu.be/f1R_bykXHGE to help me. Despite the fact that I have followed the tutorial on by one I am receiving the following Uncaught TypeError: Cannot read properties of undefined (reading 'length')at XMLHttpRequest.xhr.onload ((index):63:28).

const postsElement = document.getElementById("posts") // get an html element
// postsElement.innerHTML = 'Loading...' // set new html in that element
// var el1 = "<h1>Hi there 1</h1>"
// var el2 = "<h1>Hi there 2</h1>"
// var el3 = "<h1>Hi there 3</h1>"
// postsElement.innerHTML = el1 + el2 + el3

const xhr = new XMLHttpRequest()
const method = 'GET' // "POST"
const url = "/posts"
const responseType = "json"


xhr.responseType = responseType
xhr.open(method, url)
xhr.onload = function() {
    const serverResponse = xhr.response
    const listedItems = serverResponse.response // array
    var finalPostStr = ""
    var i;
    for (i=0;i<listedItems.length;i++) {
        console.log(i)
        console.log(listedItems[i])
    }
}
xhr.send()



</script>