Как передать данные между вложенной функцией выборки - PullRequest
Новая
       8

Как передать данные между вложенной функцией выборки

0 голосов
/ 11 апреля 2019

Я использую результаты одной выборки, чтобы сгенерировать некоторые элементы для div в моем HTML.В этих извлеченных элементах есть список URL-адресов, которые я использую для извлечения некоторых дополнительных элементов.Моя цель - объединить данные из обеих выборок в HTML-div.Мой текущий код обращается к данным, но не объединяется правильно в последнем div.

Я попытался переписать код во вложенные выборки и функции, и та же проблема сохраняется. 

var request = new XMLHttpRequest()

request.open('GET', 'https://statsapi.web.nhl.com/api/v1/teams/14?expand=team.roster', true)

var age =""
var height = ""
var weight = ""
var nationality = ""


request.onload = function () {
  var data = JSON.parse(this.response)
  var team=data.teams[0].roster.roster

  for (index = 0; index < team.length; ++index){
    var name = JSON.stringify(team[index].person.fullName).replace(/"/g,'');
    var position = JSON.stringify(team[index].position.name).replace(/"/g,'');
    var num = JSON.stringify(team[index].jerseyNumber).replace(/"/g,'');
    var div = document.createElement("div");
    var link = JSON.stringify(team[index].person.link).replace(/"/g,'');


    fetch('https://statsapi.web.nhl.com' + link)
        .then(function(response) {
            return response.json();
        })
        .then(function(myJson) {
            age = JSON.stringify(myJson.people[0].currentAge);
            height = JSON.stringify(myJson.people[0].height);
        weight = JSON.stringify(myJson.people[0].weight);
            nationality = JSON.stringify(myJson.people[0].nationality);
        });

      div.innerHTML='<a href="#" class="list-group-item" data-toggle="collapse" data-target="#sm" data-parent="#menu">' + name + ' <span class="label label-info">' + num + '</span></a>'
        div.innerHTML=div.innerHTML + '<div id="sm" class="sublinks collapse">'
      div.innerHTML=div.innerHTML + '<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span>' + age + ' </a>'
      div.innerHTML=div.innerHTML + '<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span>' + height + ' </a>'
      div.innerHTML=div.innerHTML + '<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span>' + weight + ' </a>'
      div.innerHTML=div.innerHTML + '<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span>' + nationality + ' </a>'
      div.innerHTML=div.innerHTML + '<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span>' + position + ' </a> </div>'
    document.getElementById("main").appendChild(div);
  }
}


// Send request
request.send()

Создайте элемент, содержащий данные из обеих выборок.

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

Получить обещания, и вы можете связать обещания. Проверьте это.

Попробуйте это решение. 

fetch('https://statsapi.web.nhl.com/api/v1/teams/14?expand=team.roster')
.then(response => {
    return response.json().then(data => data.teams[0].roster.roster);
}).then(teams => {
      for(team of teams) {
         const {jerseyNumber, person:{fullName, link}, position:{name}} = team;

         fetch('https://statsapi.web.nhl.com' + link)
            .then(res => {
                return res.json().then(data => data.people[0]);
            }).then(people => {
               const {currentAge, height, weight, nationality} = people;

               // Rest of the code. Create div elements.. 
               console.log(`Age: ${currentAge}, Height: ${height}, Weight: ${weight}, Nationality: ${nationality}, Num: ${jerseyNumber}, Name: ${fullName}, Position: ${name}`);
            });
      }
});
0 голосов
/ 11 апреля 2019

Вы можете использовать Promise.all для достижения вашей функциональности 

fetch('url1').then(response1 => response1.json()).then(result =>{
// write you data extraction logic here

// do fetch call from fetched data

var fetch2 = fetch('url2').then(response2 => response2.json())
return Promise.all(Promise.resolve(result), fetch2)
}).then(allResult => {

// here you will have data from both the fetch call
})
...