Access information from an object within an array using REACT NATIVE

I've encountered a challenge while trying to extract data from a weather API. I am able to access the information that is not stored in an array as it is just an object. However, I'm facing difficulties with retrieving data from the WEATHER array. Please refer to the image for more details. Surprisingly, no error messages are being displayed in the console!

Here's what's working:

.then((json) => setData(json.coord))

<Text style={styles.h1}>{data.lon}</Text> 

However, I'm struggling to access the weather data. Any help or guidance on this issue would be highly appreciated!

Link to Image Showing Problem

Visit Weather API

Currently, my objective is to fetch data from the API and specifically retrieve json.weather.

const Weather = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.openweathermap.org/data/2.5/weather?q=Rotterdam&appid=f7c5a6722f37c1cb782a66e9b904178')
      .then((response) => response.json())
      .then((json) => setData(json.weather))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  });

  return (
    <View>
      <NotiScreen/>
      <Text style={styles.h1}>{weather.id}</Text>
    </View>
  );
}

Answer №1

Solution:

Original Code:

.then((json) => setData(json.weather))

Updated Code:

.then((json) => setData(json.weather[0]))

Rendered Text:

<Text style={styles.h1}> {data.main} </Text>

Past Issue:

Previously, the code was causing too many requests to the API which resulted in being blocked.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using javascript, what is the best way to clear a text field with a specific condition?

When I clear the text field #t1, I expect text field #d1 to also clear. However, the last two lines of code do not achieve this result. function utl() { var tField = document.getElementById('t1'); var dField = document.getElementById(&a ...

Discovering an <a> element with an href attribute containing two specified strings

Here's what I have: $("a[href*='string1' && 'string2']") Unfortunately, this code didn't work for me. I also attempted: $("a:contains('string1' && 'string2')") The second one only return ...

Position the read more buttons in JavaScript at the bottom of the div

I designed three boxes in this section with content inside. To enhance the functionality, I added a feature that made the boxes smaller. Everything was functioning perfectly, but I encountered an issue with the alignment of the buttons at the bottom. Is th ...

When I attempt to utilize the API, the JavaScript implementation of a <script src=...> element seems to interfere

Within one of my HTML files, I encountered the following line near the top: <script src="//maps.google.com/maps/api/js?key=apikey"></script> The API key is currently hardcoded in this file, but I would like to use a configuration option store ...

Using Angular JS, filter the ng-repeat to only display items that have a specific property

I have a data file that contains keys such as: [ { "message": "Verify envelopes are properly loaded.", "hasFigure": false, "figureX": 0, "figureY": 0 }, { "message": "Ensure the paddle is in the down position.", "hasFigure": true, "figureX ...

implementing the CSS property based on the final value in the loop

I have created multiple divs with a data-line attribute. I am trying to loop through each div, extract the individual values from the data-line attribute, and apply them as percentages to the width property. However, it seems to only take the last value an ...

Continuous scrolling generates new pagination links as I continue to scroll

Thanks to the helpful comment from lharby on my previous post, I finally figured out how to implement Infinite Scrolling. Big thank you! The only issue now is that the script starts generating a new pagination link after scrolling past 15 posts (which i ...

Steps for deploying an API project using Heroku

I am encountering an error while trying to deploy an API application with Heroku. I suspect that there may be something missing in my setup. Could you please assist me in identifying what I might have overlooked? View heroku logs --tail result Access App ...

Unable to modify the variable within angular.js

I have been working on developing an Ionic application with angular.js and I am almost done, but I have encountered a minor issue. Inside my templates/menu.html file, I have the following code: <ion-item nav-clear menu-close ng-click="filterByPeriod(w ...

Obtaining a specific item from a group using AngularJS. Utilizing a declarative method

Consider a scenario where you need to apply a CSS rule to a specific element within a collection that needs to be selected. <div ng-repeat="fragments" ng-click="makeSelected()"></div> $scope.fragments = [ {id: 6379, someProperty: "someValu ...

A dedicated folder for hosting the static assets generated by Nuxt.js

I have a quick question I'm looking to create a dedicated directory for the static files generated by Nuxt Js Currently, Nuxt Js compiles all files into a single directory called 'dist' As I am utilizing Django Server as my backend, I nee ...

Using Javascript to dynamically flash-highlight text on a webpage when it first loads

I am looking to create a special highlight effect that activates when the page loads on specific text. Let's focus on the element with id="highlight me". The highlight should glow twice around the selected container before fading out. For a clear unde ...

One of the great features of Next.js is its ability to easily change

At the moment, my dynamic path is configured to display events by their ID [id].js localhost:3000/event/1 But I would like it to be structured as follows: localhost:3000/city/date/title. All of this information is available in the events database, but I&a ...

Arranging elements within a structured array using the bubble sort algorithm in C++

I am attempting to arrange my Student data type array, named student_database, by its member ID array from lowest to highest using a bubble sort algorithm. I found an example in a C++ textbook and implemented it into my program. Although the code compile ...

Having issues parsing for "[" and "]" delimiters, standard escaping methods proving ineffective

I am attempting to split a String that may or may not contain the characters "[" and "]", and have tried using the standard Split method after adding a condition to check if the string contains "[" or "]". However, I am encountering an issue: java.util.r ...

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

How to designate a try / catch block as asynchronous in TypeScript / JavaScript?

I am facing an issue where the code is not entering the catch block in case of an error, try { this.doSomething(); } catch (error) { console.error(error); } This problem occurs when "doSomething" returns a promise or runs asynchronous code. doSome ...

Encountering issues while trying to install Java using NPM

Encountering errors when attempting to run the following command to install java dependencies for NPM. NPM install -g java In need of assistance to fix this error. C:\WINDOWS\system32>npm i -g java [email protected] install C:\D ...

The callback functions designed to ascertain non-conflicting time ranges are harmoniously aligned

Suppose I have a JSON dataset of events, each with start and end times, and I want to create a function that generates time ranges without conflicts. For example, if the dataset includes 0800-0845, 1200-1230, 1140-1240, 1430-1530, etc., how can I gray ou ...

generate an array composed of promises to be used with Promise.all

Currently, I am working with an array of file paths and my goal is to read all the files inside a Promise.all function, followed by carrying out several tasks. var files = ["./file1.txt", "./file2.txt"] Promise.all(files.forEach(file=>{ /* read file ...