Javacript получить данные Django rest?

Question

[tarp20]

не выводятся данные

djabgo Rest имеет данные

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

мой <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 listedItems = xhr.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>

Comments

[Lynn «Кофеман»]

не выводятся данные — Это плохое описание ошибки. А что же выводится?

[Lynn «Кофеман»]

Ну и как минимум не вижу преобразования ответа (строки) в объект.

[tarp20]

Lynn «Кофеман», ничего

var currentItem = "<div class='mb-4'><h1>"+listedItems[i].id +  "</h1>"+"<p>"+ listedItems[i].content+"</p></div>"

тут поите должно выводиться id i content но не выводятся

[Евгений Палыч]

Данные в консоль пришли? console.log(listedItems)

[tarp20]

Евгений Палыч, ошибка

TypeError: null is not an object (evaluating 'listedItems.length')

[Евгений Палыч]

tarp20, Смотрите вкладку "Сеть" в браузе, какие запросы уходят и что в ответ приходит. В данный момент, вам сервер по "/tweets" ничего не вернул

совет

Оберните список Tweet в json:

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

[tarp20]

Евгений Палыч,

[Евгений Палыч]

tarp20,

const tweetsElement = document.getElementById('tweets')

проверьте есть ли на странице элемент с id="tweets"
Возможно лучше будет tweetsElement.innerHTML = finalTweetStr; изменить на:

document.getElementById('tweets').innerHTML = finalTweetStr;

так как константу tweetsElement используете всего 1 раз в коде и тогда можно не объявлять её в самой первой строке вашего кода

Answer 1

[Israfil22]

Старайтесь использовать новый синтаксис(es6), он более очевидный и простой в поиске ошибок.

В консоль должна попасть либо ошибка, которая скажет о том, что вы обращаетесь на некорректно работающий адрес, либо выведется полученный ответ от адреса, на который совершается запрос.
Также есть явная проблема - в результате скорее всего вам приходит json. Его необходимо как-то обработать и превратить в список(если только в json не хранится весь список). Я оставил вам пометку, где должен находиться этап преобразования json в массив.

const asyncRequst = async (url) => {
    const request = await fetch(url)
    return resultBody = await request.json()
}

const fillTweetBlock = async () => {
  try{
    const result = await asyncRequst('/tweets')
    console.log(result)

    const listedItems = //ТУТ нужно обработать json в объекте result и получить ваш список.

    const finalTweetStr = listedItems.reduce((acc, element, index) => {
      console.log(index)
      console.log(element)
      return acc + `<div class='mb-4'><h1>${element.id}</h1><p>${element.content}</p></div>\n`
    }, '')

    tweetsElement.innerHTML = finalTweetStr;
  }
  catch(e){
    console.log('Error occured: ', e)
  }
}
fillTweetBlock()

Comments

[tarp20]

в этой строчке const listedItems = должно быть

result.json().then(data => {
  // do something with your data
});

??

я просто новичок в Javascript

[Israfil22]

tarp20, смотрите, Вам нужно понимать, в каком виде данные приходят с back-end'a. Обычно это JSON.
fetch используемая в asyncRequest (фунция, начинается на первой строке), возвращает объект, в котором находится функция json, превращающая тело ответа(то что прислал ваш бекенд) в объект. Если все проходит хорошо, без ошибок, то после asyncRequest('/tweet') в const result записывается объект, содержащий все поля присланные с backend. Этот объект выводится в консоль на следующей строке. Проверьте его содержимое и превратите его в список, который и будет обрабатываться далее.

[tarp20]

Israfil22,
получаеться const listedItems не нужен и нужно listedItems.reduce заменить на
result.reduce
??

и element.id на element['id']