How fetch data from Django REST in JavaScript

Viewed 45

Im totaly new in Javascript so help me figure out

I have simple Rest with data:

[
    {
        "id": 1,
        "content": "Hello Tweet"
    }
]

Im trying to get this info in my <script>

<script>
        const tweetsElement = document.getElementById('tweets')

        const xhr = new XMLHttpRequest();
        const method  = 'GET'
        const url = '/tweets'
        const responseType ='json'
        
        
        xhr.responseType = responseType
        xhr.open(method,url)
        xhr.onload = function(){
            
            const serverResponse = xhr.response
            const listedItems = serverResponse.response
            console.log(listedItems)
            var finalTweetStr = ""
            var i;
            for(i=0;i<listedItems.length;i++){
                console.log(i)
                console.log(listedItems[i])
                var currentItem = "<div class='mb-4'><h1>"+listedItems[i].id +  "</h1>"+"<p>"+ listedItems[i].content+"</p></div>"
                 finalTweetStr += currentItem
            }
            tweetsElement.innerHTML = finalTweetStr;
        }
        xhr.send();
    </script>

But it doesnt work , where is the problem?

1 Answers

Your main issue appears to be here:

const serverResponse = xhr.response
const listedItems = serverResponse.response

Change it to:

const listedItems = xhr.response

and you can remove the redundant serverResponse variable.

Related