извлечение данных с помощью javascript fetch api

#javascript #promise #fetch-api

Вопрос:

Я извлекаю данные с помощью api выборки. но я не смог получить данные в разделе todosApi из последних извлеченных данных. как я могу извлечь данные?

 const usersApi = () =>{
    fetch("https://jsonplaceholder.typicode.com/users").
    then(response=>response.json()).
    then(girilenVeri).
    catch(e=>console.log(e));
}

const todosApi = (element) =>{
    fetch(`https://jsonplaceholder.typicode.com/todos/?userId=${element.id}`).
    then(response=>veriOlusturucu(response.json(), element)).//I can't get the data in response.json
    catch(e=>console.log(e));
}

const girilenVeri = (data) => {
    let cumle = [];
    document.getElementById('arama').addEventListener('keydown',function(e){
        if(e.keyCode == 8){
            cumle.pop();  
            veriEslestir(data, cumle);
        }
    });
    document.getElementById('arama').addEventListener('keypress',function(e){
        cumle.push(String.fromCharCode(e.keyCode));
        veriEslestir(data, cumle);
    });
}

const veriEslestir = (data,cumle) =>{
    veri = cumle.toString().replace(/,/g,"");
    data.forEach(element => {
        if(element.username.toLowerCase() == veri.toLowerCase()){
            todosApi(element);
        }
    });
}

const veriOlusturucu = (todo,element) => {
    console.log(todo);
    console.log(element);
    let html = "";
    html =`
                <h5 class="card-title">İletişim</h5>
                <ul class="list-group">
                    <li class="list-group-item">Kullanıcı Adı: ${element.username}</li>
                    <li class="list-group-item">E-Mail: ${element.email}</li>
                    <li class="list-group-item">Web Site: ${element.website}</li>
                    <li class="list-group-item">Şirket: ${element.company.name}</li>
                    <li class="list-group-item">Telefon No: ${element.phone}</li>
                    <li class="list-group-item">Adres: ${element.address.street} ${element.address.suite} ${element.address.city} ${element.address.zipcode}</li>
                </ul>
                <h5 class="card-title">Yapılacaklar Listesi</h5>
                <ul class="list-group">
    `;

    todo.forEach(element=>{//I need to access the data here with loop
        html =`
            <li class="list-group-item">Kullanıcı Adı: ${element.title}</li>
        `;
    });

    html  =`</ul>`;
    document.getElementById('veriListele').innerHTML=html;
}

document.addEventListener('DOMContentLoaded',usersApi());
 

введите описание изображения здесь

Как вернуть часть «response.json» с предисловием?
С пользовательской информацией проблем нет. но есть проблема с информацией о текущих задачах. посылает это мне как обещание. Я не могу получить доступ к результату обещания

введите описание изображения здесь

Если я смогу попасть в «PromiseResult», проблема будет решена. но я не могу дотянуться

Комментарии:

1. Вы пропускаете шаг, который вы делаете с пользователями — «затем(ответ=>response.json())»

2. @мария, потенциально существует более серьезная проблема, чем просто приступить response.json() к работе. Поскольку todosApi это асинхронно, нет никакой гарантии, что последующие todosApi() вызовы будут завершены в правильном порядке. И это распространяется вплоть до обработчиков «нажатия клавиши» / «нажатия клавиши»; нет никакой гарантии, что ответы на последующие события будут в правильном порядке.

Ответ №1:

Вы не совсем правильно используете api выборки для списка задач. Если вы заметили, что в свой метод userApi вы включаете дополнительный., который необходим для возврата данных json, а не обещание:

 const usersApi = () =>{
  fetch("https://jsonplaceholder.typicode.com/users").
  then(response=>response.json()).
  then(girilenVeri).
  catch(e=>console.log(e));
}

 const todosApi = (element) =>{
   fetch(`https://jsonplaceholder.typicode.com/todos/?userId=${element.id}`)
   .then(response=>response.json())
   .then(data => veriOlusturucu(data, element))
   catch(e=>console.log(e));
}
 

Попробуйте это.

Комментарии:

1. .then(json . В этот момент это уже не JSON.

2. @silencedogood спасибо. ты потрясающая.

3. response это JSON, но затем вы анализируете его с response.json() помощью . Таким образом, информация на следующем шаге представляет собой структуру JS (массив/объект и т.д.), А не JSON. Такого понятия, как объект JSON, не существует.

4. @Энди Ааа. Правильная семантика. Готча. Спасибо за исправление!

5. Да, просто позвони ему then(data => ... или что-нибудь в этом роде.