尝试映射Yelp API repsonse

时间:2017-09-04 06:02:32

标签: javascript json ajax fetch-api array.prototype.map

我正在使用Yelp API(通过使用https://cors-anywhere.herokuapp.com/作为代理向它发出请求 - 因为Yelp API本身不支持CORS)尝试创建一个非常类似于Yelp搜索的应用程序我自己的做法。我能够将响应收到我的浏览器控制台。响应有一个名为business的阵列,其业务与搜索匹配。我正在尝试使用.(map)来映射业务数组。但是,我一直在Cannot read property 'map' of undefined

我从Yelp API收到的响应如下。谢谢 Yelp API Response Image

此外,如果在查看我的代码时有任何关于javascript的其他提示,请分享,因为我很早就进入了编程生涯。

const Yelp = {
  getAccessToken: function() {
    if(accessToken) {
      return new Promise(resolve => resolve(accessToken));
    };
    return fetch(accessTokenUrl, {
      method: 'POST'
    }).then(response => response.json()).then(jsonResponse => {
     accessToken = jsonResponse.access_token;
    })
  },

  search: function(term,location,sortBy) {
    return this.getAccessToken().then(() => {
      const yelpRetrieveUrl = `${corsAnywhereUrl}https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`;
      return fetch(yelpRetrieveUrl, {
        headers: {Authorization: `Bearer ${accessToken}`}
    });
  }).then(jsonResponse => {
  if(1 > 0){
    console.log('true!!!!');
    return jsonResponse.businesses.map(business => {
      return {
        id: business.id,
        imageSrc: business.image_url,
        name: business.name,
        address: business.location.address1,
        city: business.location.city,
        state: business.location.state,
        zipCode: business.location.zip_code,
        category: business.categories,
        rating: business.rating,
        reviewCount: business.review_count
      };
    });
  } else {
    console.log('FALSE')
  }

  })
}

};

1 个答案:

答案 0 :(得分:0)

fetch(myRequest).then(function(response) {
    var contentType = response.headers.get("content-type");
    if(contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.log(error); });

您可以搜索 jsonResponse#json 函数,将您的json数据集转换为可以在JavaScript中处理的真实对象。

因为您要求它:当您使用Promises时,请使用 Promise#Catch 函数来处理即将发生的错误。不要让浏览器处理它们,因为它们可以在不同的浏览器中具有不同的行为。

并且可能删除 1> 0 检查,因为它始终是真的,但我认为这仅用于测试目的。

我希望我能帮到你!我可能会在以后添加代码,因为我目前正在使用移动设备。