Как исправить нулевой возврат данных из API Itunes, используя реагирующую выборку - PullRequest
Новая
       36

Как исправить нулевой возврат данных из API Itunes, используя реагирующую выборку

0 голосов
/ 21 июня 2019

Я пытаюсь записать данные, возвращенные из API поиска Itunes, но продолжаю получать длину возврата 0 (строка 31). Когда console.logging URL, входное значение и строка конкатов url работают как задумано (строка 32).

Раздел cors -where в api url должен отложить любые ошибки, связанные с cors. 

import React, { Component } from "react";

class Search extends Component {
  fetchData() {
    //set search value to a var
    var searchParamater = document.getElementById("searchValue").value;
    console.log("searchParameter is: " + searchParamater);
    var inputValue;
    // check if searchValue has a space in it
    try {
      if (searchParamater === " ") {
        console.log("please type something into the search bar");
      } else if (searchParamater != null && searchParamater.indexOf(" ") > -1) {
        // Search value includes white space
        // find white space / /g and replace with '+'
        inputValue = searchParamater.replace(/ /g, "+");
      } else {
        inputValue = searchParamater;
      }
    } catch (err) {
      console.log(err);
    }

    console.log("inputValue is: " + inputValue);
    let URL = `https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=${inputValue}`;
    console.log(URL);

    fetch(URL) // itunes api link goes here
      .then(response => response.json)
      .then(parsedJSON => console.log(parsedJSON.length))
      .then(parsedJSON => console.log(parsedJSON.result))
      .catch(error => console.log("parsing failed", error));
  }
  render() {
    return (
      <Jumbotron fluid>
        <Container>
          <div />
          <Form>
            <Form.Group controlId="formBasicEmail">
              <Form.Label>
                <h2>Search On iTunes:</h2>
              </Form.Label>
              <Form.Control
                type="text"
                placeholder="Enter search"
                id="searchValue"
              />
              <Form.Text className="text-muted">
                We'll never share your searches with anyone else
              </Form.Text>
            </Form.Group>
            <Button onClick={this.fetchData}>Submit</Button>
          </Form>
          <div />
        </Container>
      </Jumbotron>
    );
  }
}

export default Search;

Я ожидал бы получить в консоли возвращенный объект JSON return, но значение объекта json.count, равное 0, говорит мне, что из API ничего не возвращается ...

1 Ответ

0 голосов
/ 22 июня 2019

Исправление оказалось в моем методе выборки и теперь обновлено до: 

fetch(URL)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });
...