Gatsby 创建盖茨比源插件时遇到问题
我第一次构建了一个盖茨比源代码插件,并遇到了获取数据的问题 我遵循教程,但想尝试使用不同的API 我想使用我的商店定位器小部件API密钥。 我按照相同的步骤修改了api URL,但在终端中收到了以下错误消息:Gatsby 创建盖茨比源插件时遇到问题,gatsby,Gatsby,我第一次构建了一个盖茨比源代码插件,并遇到了获取数据的问题 我遵循教程,但想尝试使用不同的API 我想使用我的商店定位器小部件API密钥。 我按照相同的步骤修改了api URL,但在终端中收到了以下错误消息: TypeError: data.locations.forEach is not a function 这是我的gatsby-node.js文件: const fetch = require("node-fetch") const queryString = require("quer
TypeError: data.locations.forEach is not a function
这是我的gatsby-node.js文件:
const fetch = require("node-fetch")
const queryString = require("query-string")
exports.sourceNodes = (
{ actions, createNodeId, createContentDigest },
configOptions
) => {
const { createNode } = actions
// Gatsby adds a configOption that's not needed for this plugin, delete it
delete configOptions.plugins
// Convert the options object into a query string
const apiOptions = queryString.stringify(configOptions)
// Join apiOptions with the Pixabay API URL
const apiUrl = `https://www.storelocatorwidgets.com/admin/api/v1/locations?${apiOptions}`
// Gatsby expects sourceNodes to return a promise
return (
// Fetch a response from the apiUrl
fetch(apiUrl)
// Parse the response as JSON
.then(response => response.json())
// Process the JSON data into a node
.then(data => {
// For each query result (or 'hit')
data.locations.forEach(address => {
console.log("address data is:", address)
})
})
)
}
这是我的gatsby-config.js文件:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: "gatsby-source-pixabay",
options: {
api_key: "f360e50a2c34ffb4a149d10372fe700e",
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// 'gatsby-plugin-offline',
],
}
下面是应该获取但不是的JSON对象:
{
"status": "OK",
"locations": {
"13466445": {
"name": "Village Green Society",
"display_order": "999999",
"filters": null,
"createstamp": "1536191260",
"editstamp": "1546982631",
"geocodestatus": "Manual",
"geocodetimestamp": "0",
"google_placeid": "",
"locationid": "13466445",
"description": "",
"address": "2043 16th St, Boulder, CO, 80302, US",
"image": "",
"website": "https://villagegreenboulder.com/",
"website_text": "",
"facebook": "",
"instagram": "https://www.instagram.com/villagegreenboulder/",
"twitter": "",
"phone": "(720) 389-5726",
"phone2": "",
"fax": "",
"email": "",
"hours_Monday": "",
"hours_Tuesday": "",
"hours_Wednesday": "",
"hours_Thursday": "",
"hours_Friday": "",
"hours_Saturday": "",
"hours_Sunday": "",
"store_list_footer": "",
"print_directions_button": null,
"map_lat": "40.019788",
"map_lng": "-105.275335",
"priority_type": "",
"priority_setting": "Random",
"z_index": "",
"visibility": "",
"markerid": "default"
},
},
}
我漏了一步吗?看起来应该可以,但这是我第一次尝试创建源插件,所以我对这个过程不太熟悉。任何帮助都将不胜感激
TypeError:data.locations.forEach不是函数
forEach(…)
是一种数组方法&看起来端点不是以数组的形式返回位置,而是以每个位置的id作为键的对象。尝试将数据转换为数组。位置
:
Object.keys(data.locations).forEach(address => {
console.log("address data is:", address)
})
谢谢,这把所有的数据都收集到了@dereknguyen