0

I have most of my code written but I'm not sure what I'm doing wrong on this:

let url = 'https://cors-anywhere.herokuapp.com/https://newsapi.org/v2/top-headlines?sources=hacker-news&apiKey=3dcfcd098261443dae7c7d002f25c062';

fetch(url)
  .then(r =>{
  return r.json();
})

  .then(data => {
    let articles = data.articles;
    let storyList = document.createElement("ul");
    let body = document.querySelector("body");
    body.appendChild(storyList);
})
  articles.map(articles => {
    let storyItem = document.createElement("li");
    storyItem.innerHTML = 'a href = "' + articles.href + '">' + articles.title + "</a>";
      storyList.appendChild(storyItem);
  })

  .catch(e => {
    console.log('An error has occurred: ${e}');
});

I had taken out the < > from the API code and tried switching things around like switching some properties to say something different but could someone help me understand this a bit better? Thanks in advance!

Emily Butterfield
  • 11
  • 3
  • It looks like you are using `articles` before it is populated. – zero298 Jul 03 '18 at 16:01
  • Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – zero298 Jul 03 '18 at 16:01
  • Not only that, but you are using `articles` outside the scope that it is defined in. – zero298 Jul 03 '18 at 16:03
  • Why are you using "cors-anywhere.herokuapp.com" when the resource you are fetching allows cors and you could fetch it directly? Why are you using `map` to iterate the articles array, instead of `forEach`, when you are not using the return value? – gforce301 Jul 03 '18 at 16:39
  • @gforce301 Well I'm doing a coding bootcamp so we haven't gone over "forEach" yet. I'm using "cors-anywhere.herokuapp.com" because that is how the example in the checkpoint was set up. – Emily Butterfield Jul 04 '18 at 14:31
  • I personally would find a different instruction site. Any site teaching programming concepts that does not cover the basics (for, while, foreach ...) before covering more advanced looping structures (map, reduce, filter, find ...) is not doing you any favors. Working example provided in my answer. If you want to see a way to do it with map just ask. – gforce301 Jul 05 '18 at 15:42

1 Answers1

0

There were several things that you were doing wrong.

  • No need to use a proxy when the API you are consuming allows cors requests.
  • You were trying to access the "articles" out of scope and before the promise was resolved

  • You were using the wrong method, IMO, on the "articles" array. From here: Array.prototype.map()

    The map() method creates a new array with the results of calling a provided function on every element in the calling array.

    but you were not trying create a new array, you just wanted to iterate the array's elements. That is what Array.prototype.forEach() is for.

  • You used single quotes ' on your template literal instead of back-ticks `

let url = 'https://newsapi.org/v2/top-headlines?sources=hacker-news&apiKey=3dcfcd098261443dae7c7d002f25c062';

fetch(url)
.then(response => {
    return response.json();
})
.then(data => {
    let list = document.createElement('ul');

    document.querySelector("body").appendChild(list);

    data.articles.forEach(article => {
        let item = document.createElement('li');
        item.innerHTML = '<a href="' + article.url + '">' + article.title + "</a>";
        list.appendChild(item);
    });
})
.catch(e => {
    console.log(`An error has occurred: ${e}`);
});
gforce301
  • 2,944
  • 1
  • 19
  • 24