Show news via API

JavaScript
1

Good morning,
I’m training on APIs and I’m stuck.

Do you have an idea?

Thank you for your help.
https://codepen.io/aaashpnt-the-sans/pen/wvbyrRz?editors=1111

Sans titre
Sans titre1836×1062 72.5 KB

2

I do not see that error in the codepen you provided (I do see a ton of blocked javascript errors so perhaps the error is in one of those scripts).

If you click the link on the right of that error message, it should take you to the code that is using that function. According to the error, you are trying to use a function that is not defined.

Perhaps if you can tell everyone more about what you are using, and if perhaps you have a different server you are playing on where we can actually load the scripts and see the error, that would be great.

One side note, you are exposing your API key for that site in your source. I don’t know if that is a big deal to you, but if there are financial details or any kind of account details you don’t want exposed with that key, you will need to change it.

1 Like
3

Thank you for your reply.

Regarding the key it is not important it is just to display information.

What I don’t understand is that when I do this in my browser it works, I put the key in the link and it’s ok.

It’s an API for displaying news.

I take news as an API here: https://newsapi.org/

https://newsapi.org/v2/top-headlines?country=us&pageSize=10&apiKey=4625bd7770c34a74b705fd00ef4a9adb

and in my source I have my key in my variable

const apiKey = "4625bd7770c34a74b705fd00ef4a9adb";

const blogContainer = document.getElementById("blog-container");


async function fetchRandomNews() {
    try {
        const apiUrl = `https://newsapi.org/v2/top-headlines?country=us&pageSize=10&apiKey=${apiKey}`;
        const response = await fetch(apiUrl);
        const data = await response.json();
        return data.articles;

    } catch (error) {
        console.error("Error fetching random news", error);
        return [];
    }
}

function displayBlogs(articles) {
    blogContainer.innerHTML = "";
    articles.forEach((article) => {
        const blogCard = document.createElement("div");
        blogCard.classList.add("blog-card");
        const img = document.createElement("img");
        img.src = article.urlToImage;
        img.alt = article.title;
        const title = document.createElement("h2");
        title.textContent = article.title;
        const description = document.createElement("p");
        description.textContent = article.description;

        blogCard.appendChild(img);
        blogCard.appendChild(title);
        blogCard.appendChild(description);
        blogContainer.appendChild(blogCard);
    });
}

async () => {
    try {
        const articles = await fetchRandomNews();
        displayBlogs(articles);
    } catch (error) {
        console.error("Error fetching random news", error);
    }
};
4

It would help of you show us the error you get

5

I receive this as an error message.

I would just like to display API news.

Sans titre
Sans titre1836×1062 130 KB

6

There is no crypto in the code you showed us. So he error and the code have nothing to do with each other.

7

I don’t understand why it gives me this error, do you have any idea?

8

Where are these files contentscript.js and inpage.js coming from?

9

I don’t have this file in my project, how can this be done?

10

A couple of observations.

Fetching this api on codepen isn’t allowed. You get a cors error and the following message.

Requests from the browser are not allowed on the Developer plan, except from localhost.

If I run the script you posted in post #3 from localhost it works as intended and downloads the news articles.

So I think as Thallius illuded to, the error messages are not related to your fetching js script.

3 Likes
11

Hello, thank you for your answer.

On my localhost at home it doesn’t work and I don’t understand why

12

Do you know how to work with the browsers developer tools?

1 Like
13

no just use inspect mode