#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 => ...
или что-нибудь в этом роде.