Here in the snippet below is my script to store in a single Array (const store) all the data that I need to exploit in a structured way. In order to use them "simply" afterwards.
console.log(store)
displays in the console the desired data structure:
(2) [{…}, {…}]
0: {ID: "freecodecamp", streams: {…}, users: {…}, channels: {…}}
1: {ID: "funfunfunction", channels: {…}, users: {…}, streams: {…}}
console.log(store[0].ID)
displays the desired result: "freecodecamp"
However store[0].users
, store[0].channels
, and store[0].streams
outputs undefined
.
I don't understand why. While everything works great with store[0].ID
const matchCharUrl = str => str.match(/[^/]/g).join('')
// Twitch.tv API call and settings
// --------------------------------------------------
const twitchAPI = () => {
// const baseUrl = 'https://api.twitch.tv/kraken' // Twitch API base URL
const baseUrl = 'https://wind-bow.glitch.me/twitch-api/' // FCC Twitch API Pass-through
const params = ['users/', 'channels/', 'streams/'] // Twitch API, enabled root
// suffix (channel or user) identifier
const identifiers = ['freecodecamp', 'funfunfunction']
// array with datas that will be exploit in a function ( displayResults() )
const store = []
identifiers.forEach((ID, index) => {
const obj = {ID}
for(const param of params){
const urlAPI = baseUrl + param + ID
fetch(urlAPI, {
method: 'GET'
}).then(res => {
if(res.ok) return res.json()
throw new Error('Network response error. Status Code:', res.status, res.statusText)
}).then(data => {
// Data structure of var store:
// store = [ {id: freecodecamp, channels: {data}, streams: {data}, users: {data} } ]
obj[matchCharUrl(param)] = data
}).catch(err => {
console.log('Fetch Error:', err)
})
}
store.push(obj)
})
console.log(store) // OK
console.log(store[0]) // OK
console.log(store[0].ID) // OK
console.log(store[0].users) // undefined
console.log(store[0].channels) // undefined
console.log(store[0].streams) // undefined
// displayResults(store)
}
twitchAPI()