Fetching data from a REST API is a common requirement for mobile applications, allowing developers to access and display dynamic content. In this article, we present three practical examples of how to fetch data from a REST API in mobile apps, helping you understand the process with clear use cases and code snippets.
In this example, we’ll create a simple weather application that fetches current weather data from a public weather API. Users can enter a city name and receive real-time weather information.
fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
const weatherDescription = data.weather[0].description;
const temperature = data.main.temp;
console.log(`Current weather in London: \({weatherDescription}, }\(temperature}°K`);
})
.catch(error => console.error('Error fetching data:', error));
YOUR_API_KEY with a valid API key from OpenWeatherMap.This example demonstrates fetching a list of movies based on a user’s search query using a movie database API. Users can input a movie title and receive relevant results.
const searchQuery = 'Inception';
fetch(`https://api.themoviedb.org/3/search/movie?query=${searchQuery}&api_key=YOUR_API_KEY`)
.then(response => response.json())
.then(data => {
const movies = data.results;
movies.forEach(movie => {
console.log(`Title: \({movie.title}, Release Date: }\(movie.release_date}`);
});
})
.catch(error => console.error('Error fetching data:', error));
In this example, we will build a news application that fetches the latest articles from a news API. The app will display a list of headlines to the user.
fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
const articles = data.articles;
articles.forEach(article => {
console.log(`Headline: \({article.title}, Source: }\(article.source.name}`);
});
})
.catch(error => console.error('Error fetching data:', error));