I am trying to create a search page for Pathfinder. Below is the code I wrote to try and pull in the data from the api. While trying to just get the fetches to work, I am noticing when I console.log the data returned from the fetches, it is listed more than once.
async function getData(){
const apiKey = "API KEY WITHHELD";
const actionsURL = "https://api.pathfinder2.fr/v1/pf2/action";
const ancestriesURL = "https://api.pathfinder2.fr/v1/pf2/ancestry";
const ancestryFeaturesURL = "https://api.pathfinder2.fr/v1/pf2/ancestryFeature";
const archetypesURL = "https://api.pathfinder2.fr/v1/pf2/archetype";
const backgroundsURL = "https://api.pathfinder2.fr/v1/pf2/background";
const classesURL = "https://api.pathfinder2.fr/v1/pf2/class";
const classFeaturesURL = "https://api.pathfinder2.fr/v1/pf2/classFeature";
const deitiesURL = "https://api.pathfinder2.fr/v1/pf2/deity";
const equipmentURL = "https://api.pathfinder2.fr/v1/pf2/equipment";
const featsURL = "https://api.pathfinder2.fr/v1/pf2/feat";
const spellsURL = "https://api.pathfinder2.fr/v1/pf2/spell";
// Actions
const actionsResponse = await fetch(actionsURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const actionsData = await actionsResponse.json();
// Ancestries
const ancestriesResponse = await fetch(ancestriesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const ancestriesData = await ancestriesResponse.json();
// Ancestry Features
const ancestryFeaturesResponse = await fetch(ancestryFeaturesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const ancestryFeaturesData = await ancestryFeaturesResponse.json();
// Archetypes
const archetypesResponse = await fetch(archetypesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const archetypesData = await archetypesResponse.json();
// Backgrounds
const backgroundsResponse = await fetch(backgroundsURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const backgroundsData = await backgroundsResponse.json();
// Classes
const classesResponse = await fetch(classesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const classesData = await classesResponse.json();
// Class Features
const classFeaturesResponse = await fetch(classFeaturesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const classFeaturesData = await classFeaturesResponse.json();
// Deities
const deitiesResponse = await fetch(deitiesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const deitiesData = await deitiesResponse.json();
// Equipment
const equipmentResponse = await fetch(equipmentURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const equipmentData = await equipmentResponse.json();
// Feats
const featsResponse = await fetch(featsURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const featsData = await featsResponse.json();
// Spells
const spellsResponse = await fetch(spellsURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Access-Control-Allow-Headers": "*",
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const spellsData = await spellsResponse.json();
// do what you want with actionsData and ancestriesData, etc here
console.log(actionsData);
console.log(ancestriesData);
console.log(ancestryFeaturesData);
console.log(archetypesData);
console.log(backgroundsData);
console.log(classesData);
console.log(classFeaturesData);
console.log(deitiesData);
console.log(equipmentData);
console.log(featsData);
//console.log(spellsData);
}
getData();
Originally I used a fetch to grab all of the endpoints listed in the main endpoint (see page: https://api.pathfinder2.fr/doc) and then ran a loop to fetch data from each endpoint -- DRY principles and what not.
const apiKey = "API KEY WITHHELD";
let pathfinderLibraries = [];
let pathfinder = fetch("https://api.pathfinder2.fr/v1/pf2", {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": "application/json",
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
}).then((response) => {
return response.json()
})
.then(data => {
let pflibraries = data;
//console.log(pflibraries);
pflibraries.forEach(pflibrary => {
pathfinderLibraries.push(pflibrary);
pathfinderLibraries.forEach( library => {
fetch(library, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": "application/json",
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
}).then((response) => {
return response.json()
}).then(data => {
console.log(data);
});
});
console.log(pflibrary);
});
});
But this was logging each of the endpoint data multiple times so I decided to try it without the loop. This decreased the amount of times each endpoint data was logged, but the data was still being logged multiple times.
I experimented with changing the location of the console.logs and had 1 of 2 results, either it did not log at all or continued to log multiple times.
As I said previously, I just wanted to create a function with a loop that would iterate through main endpoint that lists the sub-endpoints and fetch the data so I can create a search page for Pathfinder.
CodePudding user response：
In this block of code
pflibraries.forEach(pflibrary => {
pathfinderLibraries.push(pflibrary);
pathfinderLibraries.forEach( library => {
you traverse through pflibraries and each of them you are adding into pathfinderLibraries. Right after that you traverse through pathfinderLibraries.
This means that after every loop through pflibraries your list of libraries in pathfinderLibraries will contain pflibrary from the current iteration and also from all the previous iterations of pflibraries.
To fix the problem you need to remove this forEach from the code
pathfinderLibraries.forEach( library => {
and just call the fetch for the library in the current iteration.