Show news via API

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

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

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);
    }
};

It would help of you show us the error you get

I receive this as an error message.

I would just like to display API news.

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

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

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

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

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

Hello, thank you for your answer.

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

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

1 Like

no just use inspect mode

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.