@tarp20

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

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

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>
  • Вопрос задан
  • 126 просмотров
Решения вопроса 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()
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
22 янв. 2021, в 19:26
40000 руб./за проект
22 янв. 2021, в 19:14
25000 руб./за проект