JavaScript - Как получить указанные данные c из Обещания - PullRequest
Новая
       0

JavaScript - Как получить указанные данные c из Обещания

1 голос
/ 29 марта 2020

Итак, вот такая ситуация: я пытаюсь получить конкретные c данные из Обещания. Обещание показывает данные из API: https://api.covid19api.com/country/netherlands/status/confirmed

Обещание состоит из трех значений (0, 1 и 2), и каждое значение состоит из массива, который содержит несколько переменных. Я хочу получить данные из последней переменной в массиве из названий Promise '0' (понимаете?).

Вот как выглядит Promise: Здесь вы можете видеть, что он состоит значений 0, 1 и 2

После нажатия на него: Я пытаюсь получить данные из массива (PromiseValue, я считаю, это называется?)

Итак, это данные, которые я хочу: данные из последней переменной в массиве. Из этой переменной я хочу получить данные из «Cases», поэтому «8603». Это данные, которые я пытаюсь получить 

function getAPIdata() {

  var url = 'https://api.covid19api.com/country';
  var country = document.getElementById('country').value;
  var requestConfirmed = url + '/' + country + '/' + 'status' + '/' + 'confirmed';
  var requestRecovered = url + '/' + country + '/' + 'status' + '/' + 'recovered';
  var requestDeaths = url + '/' + country + '/' + 'status' + '/' + 'deaths';


  var requestOptions = {
    method: 'GET',
    redirect: 'follow'
  };

  Promise.all([
    fetch(requestConfirmed, requestOptions),
    fetch(requestRecovered, requestOptions),
    fetch(requestDeaths, requestOptions)
  ])

    .then(function (responses) {
      return responses.map(function (response){
        if(!response.ok) throw Error(response.statusText);
        return response.json();
      });

    }) .then(function(result){
        onAPISucces(result);
        // console.log(result);

    }) .catch(function (error){
        onAPIError(error);
    });

  }

  function onAPISucces(result) {

    var type = result;
    var landenLijst = result;
    console.log(landenLijst);
    var country = document.getElementById('country').value;
    // console.log(landenLijst[landenLijst.length - 1].Cases);
    for(var i=0; i < landenLijst.length; i++);
    // console.log(landenLijst[i].TotalConfirmed);

    var totaalAantalBesmettingen = landenLijst[0].PromiseValue[PromiseValue.length - 1];

    var totaleBesmettingen = document.getElementById('confirmedInformation');
    totaleBesmettingen.innerHTML = totaalAantalBesmettingen;

  }

  function onAPIError(error) {
    console.error('Oeps, foutje!', error);
    var totaleBesmettingen = document.getElementById('confirmedInformation');
    totaleBesmettingen.innerHTML = 'Please try again. Did you enter a country?';
  }

  document.getElementById('zoek').onclick = function(){
    getAPIdata();
  };
<body>

      <form>
  			<fieldset>
  				<legend>Choose a country:</legend>
  				<label for="country">Country:</label>
  				<input type="text" name="country" id="country" placeholder="For example: Belgium"/>
  				<input type="button" id="zoek" value="Search" />
  			</fieldset>
  		</form>
      <p id="confirmedInformation"></p>
      <p id="recoveredInformation"></p>
      <p id="deathsInformation"></p>

      <p id="test"></p>

  	</body>

Я застрял в моем коде ниже (который вы можете найти в моем JavaScript коде). Я не знаю, как получить указанные данные c из массива. Вы знаете, что я делаю не так? 

var totaalAantalBesmettingen = landenLijst[0].PromiseValue[PromiseValue.length - 1];

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

Извлеките элемент из массива и, соответственно, получите доступ к свойству Cases.

См. Ниже: 

 let data=result;
    let confirmed=data[0].pop();
    let recovered=data[1].pop();
    let deaths=data[2].pop();  
document.querySelector('#confirmedInformation').innerHTML="Confirmed:"+confirmed.Cases;

Запустите этот фрагмент кода. Это будет интересно 

function getAPIdata() {
 // document.querySelector('span').classList.toggle('hidden');
  var url = 'https://api.covid19api.com/country';
  var country = document.getElementById('country').value;
  var requestConfirmed = `${url}/${country}/status/confirmed`;
  var requestRecovered = `${url}/${country}/status/recovered`;
  var requestDeaths = `${url}/${country}/status/deaths`;
    Promise.all([
        fetch(requestConfirmed),
        fetch(requestRecovered),
        fetch(requestDeaths)
     ])
     .then(function (responses) {
       let jsonPromises=[];
       responses.forEach((response)=> jsonPromises.push(response.json()));
        return Promise.all(jsonPromises);
      })
     .then(function(result){
     // document.querySelector('span').classList.toggle('hidden');
        onAPISucces(result);
      }) 
      .catch(function (error){
      // document.querySelector('span').classList.toggle('hidden');
       console.log(error);
        onAPIError(error);
      });

  }
  function onAPISucces(result) {
    //console.log(result);
    let data=result;
    let confirmed=data[0].pop();
    let recovered=data[1].pop();
    let deaths=data[2].pop();  document.querySelector('#confirmedInformation').innerHTML="?Confirmed:"+confirmed.Cases;  document.querySelector('#recoveredInformation').innerHTML="?Recovered:"+recovered.Cases;  document.querySelector('#deathsInformation').innerHTML="?Deaths:"+deaths.Cases;
    
  }
  function onAPIError(error) {
    console.error('Oeps, foutje!', error);
     document.querySelector('#test').innerHTML="Try again with valid country ???????";
     document.querySelector('#confirmedInformation').innerHTML="";  document.querySelector('#recoveredInformation').innerHTML="";  document.querySelector('#deathsInformation').innerHTML="";
  }

  document.getElementById('zoek').onclick = function(){
    getAPIdata();
  };
.hidden{
display:none;
}
<body>
   <form>
  <fieldset>
  <legend>Choose a country to get Coronavirus ? update:</legend>
  <label for="country">Country:???????</label>
  <input type="text" name="country" id="country" placeholder="For example: NetherLands"/>
  	<input type="button" id="zoek" onclick=" getAPIdata()" value="Search" />
  	</fieldset>
  		</form>
      <span>?Data from API</span>
      <p id="confirmedInformation"></p>
      <p id="recoveredInformation"></p>
      <p id="deathsInformation"></p>
      <p id="test"></p>
  	</body>
0 голосов
/ 29 марта 2020

map не оценивает обещания от звонка json(). Вы должны относиться к ним как к обещаниям. 

   // ...
   .then(function (responses) {
      return Promise.all(responses.map(function (response){
        if(!response.ok) throw Error(response.statusText);
        return response.json();
      }));
   });
   // ...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...