#How do I iterate over this API which is an object containing an array of articles??

15 messages · Page 1 of 1 (latest)

polar lance
#

When I console.log() stories.articles.map() it will actually work but not with the view.innerHTML

valid zenith
#

Does your hasStories variable ever evaluate to true? I don't see that stories.length would ever be anything other than undefined.

polar lance
#

Sorry for the late response but the hasStories evaluates to true if the stories.length is greater than 1, which it is because i am fetching an api that has an array of articles

#

Although the articles is inside of an object and the map method does not work on objects, so when I try to reference the results array inside of the object with stories.results.map() it will work but only with console.log but will not actually render any stories

tall whale
#

Hello, have you fixed this?

valid zenith
polar lance
#

Here is a link to the code if you guys are interested!

#

This repo is using the hacker news API, but the API that I was trying to use was the one in the screenshot

#

I've updated it to use the API that is originally in the screenshot the issue I am having is on the stories.js file and I have console logged where I am having the issue in the first function/ note: the other pages aren't going to work because the path /top-headlines is default

latent skiff
#

Are you trying to do something like this

export default async function Stories(path) {
  const stories = await getStories(path)
  // console.log(stories)
  // const hasStories = stories.length > 0
  // view.innerHTML = `<div>
  // ${hasStories ? stories.map(story => JSON.stringify(story)) : 'No Stories!'}
  // </div>`
  let storyList = ''
  if(stories.length){
    storyList += stories.map(story =>{
      return `<div id="${story.id}" class="story-card"><h1>${story.title}</h1><p>${story.url}</p></div>`
    })
  }
  view.innerHTML = storyList;
}
polar lance
latent skiff
#

Yeah, i did forget the 'no stories' part but if you want it is one long string you had it but if you want each object to have DOM elements like <h1> etc, I'm unsure how to do with ternaries because of the need to += to add each objects elements to the page.