DEV Community

Cover image for How to Integrate a News API into Your Website or Mobile App
NewsData.io
NewsData.io

Posted on

How to Integrate a News API into Your Website or Mobile App

#newsapi #mobile #news #beginners

Adding live news to a website or mobile application does not require building your own news collection system. A News API lets your application retrieve structured articles from multiple sources and display them inside your own product.

In this guide, we’ll use NewsData.io to demonstrate a complete integration—from getting an API key to making requests, processing JSON responses, and displaying news.

1. How a News API Integration Works

The basic workflow is:

Website/Mobile App → Your Backend → NewsData.io API → JSON Response → Your Application

Your application sends a request containing parameters such as keywords, country, language, or category. NewsData.io returns structured JSON containing the matching articles.

For example, an application could request technology news from the US:

GET https://newsdata.io/api/1/latest
    ?apikey=YOUR_API_KEY
    &q=artificial intelligence
    &country=us
    &category=technology
    &language=en
Enter fullscreen mode Exit fullscreen mode

The response contains article information such as the title, link, description, source, publication date, image, category, and language.

2. Step 1: Get Your NewsData.io API Key

Create a NewsData.io account and obtain your API key from the dashboard.

Your key is used to authenticate API requests:

https://newsdata.io/api/1/latest?apikey=YOUR_API_KEY
Enter fullscreen mode Exit fullscreen mode

Security tip: Do not expose your production API key in frontend JavaScript or publicly distributed mobile-app code. For production applications, route requests through your own backend.

3. Step 2: Test the API With cURL

Before integrating the API into your application, test the endpoint directly.

curl "https://newsdata.io/api/1/latest?apikey=YOUR_API_KEY&q=artificial%20intelligence&country=us&language=en"
Enter fullscreen mode Exit fullscreen mode

If the request succeeds, NewsData.io returns a JSON response similar to:

{
  "status": "success",
  "totalResults": 10,
  "results": [
    {
      "article_id": "abc123",
      "title": "New AI Technology Announced",
      "link": "https://example.com/article",
      "description": "A new development in artificial intelligence...",
      "source_name": "Example News",
      "pubDate": "2026-09-09 10:30:00",
      "country": ["us"],
      "language": "english",
      "category": ["technology"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

The exact returned articles and values will change as new stories are published.

4. Complete Python Integration

Python is useful for backend services, data pipelines, dashboards, and automated news applications.

Install the SDK 

pip install newsdataapi
Enter fullscreen mode Exit fullscreen mode

NewsData.io provides an official Python client for accessing the API.

Fetch the Latest News 

from newsdataapi import NewsDataApiClient

api = NewsDataApiClient(apikey="YOUR_API_KEY")

response = api.news_api(
    q="artificial intelligence",
    country="us",
    language="en"
)

for article in response.get("results", []):
    print(article.get("title"))
    print(article.get("link"))
    print(article.get("source_name"))
    print("-" * 50)
Enter fullscreen mode Exit fullscreen mode

This retrieves matching news and loops through the returned articles.

5. Complete JavaScript Integration

For a server-side JavaScript application, you can call the REST endpoint using fetch().

const API_KEY = "YOUR_API_KEY";

async function getNews() {
  const url = new URL("https://newsdata.io/api/1/latest");

  url.searchParams.set("apikey", API_KEY);
  url.searchParams.set("q", "artificial intelligence");
  url.searchParams.set("country", "us");
  url.searchParams.set("language", "en");

  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`);
  }

  const data = await response.json();

  data.results.forEach(article => {
    console.log(article.title);
    console.log(article.link);
  });
}

getNews().catch(console.error);
Enter fullscreen mode Exit fullscreen mode

The same approach can be used with Node.js backends and other JavaScript frameworks.

6. Complete React Integration

NewsData.io also provides a React client. Install it with:

npm install newsdataapi
Enter fullscreen mode Exit fullscreen mode

Then initialize the client and request news:

import useNewsDataApiClient from "newsdataapi";

function NewsFeed() {
  const { latest } =
    useNewsDataApiClient("YOUR_NEWSDATA_API_KEY");

  const loadNews = async () => {
    const data = await latest({
      q: "artificial intelligence",
      country: "us",
      language: "en"
    });

    console.log(data);
  };

  return (
    <button onClick={loadNews}>
      Load Latest News
    </button>
  );
}

export default NewsFeed;
Enter fullscreen mode Exit fullscreen mode

The React client supports NewsData.io endpoints and handles request-related functionality for React applications.

7. Display News on a Website

Once the JSON response is available, map the returned fields to your interface.

For example:

data.results.map(article => `
  <article>
    <h2>${article.title}</h2>
    <p>${article.description || ""}</p>
    <small>${article.source_name}</small>
    <a href="${article.link}" target="_blank">
      Read More
    </a>
  </article>
`).join("");
Enter fullscreen mode Exit fullscreen mode

This basic structure can be turned into:

  • News cards
  • Category pages
  • Search results
  • Breaking-news sections
  • Personalized feeds

8. Build a More Targeted News Feed

The real value of a News API comes from filtering the data.

For example, a finance application could request:

q=inflation OR interest rates
category=business,finance
country=us,in,gb
language=en
Enter fullscreen mode Exit fullscreen mode

A technology application could use:

q=artificial intelligence OR machine learning
category=technology
language=en
Enter fullscreen mode Exit fullscreen mode

NewsData.io supports parameters for keywords, countries, languages, categories, sources, dates, and other filtering requirements.

9. Mobile App Integration

The same REST API can power Android and iOS applications.

The recommended architecture is:

Mobile App → Your Backend → NewsData.io → JSON → Mobile App

Your backend can:

  • Request the news
  • Apply application-specific filtering
  • Cache results
  • Return only the required fields to the mobile application

This approach also helps protect your API credentials.

10. Add Pagination

A news application should not request and render an unlimited number of articles at once.

NewsData.io responses include a nextPage value when additional results are available. Your application can use that value to retrieve the next set of articles.

A simplified Python example:

page = None

while True:
    params = {
        "q": "artificial intelligence",
        "language": "en"
    }

    if page:
        params["page"] = page

    response = api.news_api(**params)

    for article in response.get("results", []):
        print(article["title"])

    page = response.get("nextPage")

    if not page:
        break
Enter fullscreen mode Exit fullscreen mode

11. Handle API Errors Properly

Production applications should handle:

  • Invalid API keys
  • Invalid parameters
  • Empty results
  • Network failures
  • Usage or credit limits
  • API timeouts

Do not allow an API failure to break your entire application. Show a fallback message, retry when appropriate, and log errors for monitoring.

12. Practical Applications

Once integrated, the same NewsData.io connection can power:

  • News aggregation websites
  • Personalized news apps
  • Finance dashboards
  • Market intelligence platforms
  • Media monitoring systems
  • Competitor monitoring
  • Research applications
  • AI-powered news summarization
  • Industry-specific news feeds
  • Real-time news alerts

13. From API Integration to Real-Time News

For applications that require continuous article delivery rather than periodic REST requests, NewsData.io also offers a Real-Time Streaming API based on WebSockets.

This allows applications to maintain a persistent connection and receive matching articles as they are delivered.

Conclusion

Integrating a News API is essentially a five-step process:

Get an API key → Build the request → Receive JSON → Process the results → Display the news

NewsData.io can be integrated into websites, backend applications, React projects, and mobile applications using standard HTTP requests or supported SDKs.

Start with a simple keyword query, add filters such as country and category, implement pagination and error handling, and then build the news experience around the data your users actually need.

For developers, the important part is not simply retrieving news—it is building a reliable pipeline that turns structured news data into a useful product experience.

Top comments (0)