Cann't Accesss 'todayCases' object in my json file


I’ve converted MySql data into a json file , I want to fetch this data to get todayCases based on a selected country

const [countryInfo, setCountryInfo] = useState({});
const onCountryChange = (event) => {
     try{
     const countryCode = event.target.value;
     console.log("YOOOOOOOO >>>>>>",countryCode);
     setCountry(countryCode);

     const url = 
     countryCode === "Lebanon"
     ? "https://disease.sh/v3/covid-19/countries/Lebanon?strict=true"
     : `http://127.0.0.1/xampp/Seniorproject/covidapi.php/${countryCode}`;
   
      fetch(url)
     .then((response) => response.json())
     .then((data) => {
       setCountry(countryCode);
       setCountryInfo(data);
     });
     console.log("countryinfo >>>>>>",countryInfo);
*it displays all the information in the json file, not depending on the selected value*
   }
 catch(err){
   console.log(err);
 }
};

return (
                  <Infobox key="cases" title="Coronavirus Cases"  
                   cases={countryInfo.todayCases} />
)

I’m a little confused but this block of code:

     fetch(url)
       .then((response) => response.json())
       .then((data) => {
         setCountry(countryCode);
         setCountryInfo(data);
       });
     console.log("countryinfo >>>>>>",countryInfo);

Why are you setting “country” in here? Is it dependent on the fetch?

Your console.log is outside of your fetch Promise so it will run before that data is set. Can you put it inside the the second then block?

I would want a catch block here in case something goes wrong.

Can you confirm that the response from the server is what you want? What is the url you are using there and does the response look like? This may be a b/e problem if it isn’t sending the data you are expecting.

When I put console.log inside the second then block
nothing has changed the full data is still appearing like in the image above

Wait, what? You put:

console.log("countryinfo >>>>>>",countryInfo);

at the end of the second then block and you got that error? that doesn’t make any sense.

That error could be caused here:

<Infobox key="cases" title="Coronavirus Cases"  
                   cases={countryInfo.todayCases} />

because if countryInfo is undefined then countryInfo.todayCases will throw that error. You’re initializing that as an empty object so I would not expect that to happen initially. But if you later set it to undefined, then that could happen.

So, we need to know what you are getting back from the server. Replace your second then block with this:

     .then((data) => {
       console.log('data returned from server', data);
       setCountry(countryCode);
       setCountryInfo(data);
     });

That will tell us what it is getting from the API.

Then, also add the line:

    console.log('countryInfo to render', countryInfo);

on the line before the return statement so we can see what it is trying to render.

OK, this is pissing me off a little - you’ve changed a previous post which makes my response to that post seem nonsensical. Please don’t edit the content to previous posts - you can just add a new post.

Originally your second post on this thread said:

When I put console.log inside the second then block an error has occured:
TypeError: Cannot read property todayCases of undefined

My last response was in reference to that.

So, you have changed what you are asking and I no longer understand what you are asking.

Please think out your question and ask it clearly.

When I look at your last image, I don’t understand the arrow that you’re drawing and I don’t understand because it looks like good data.

What is happening that shouldn’t or what is not happening that should?

I need to get back only “todayCases” not all the data .for example when I selected ‘Kelbata’ I want “todayCases” for this country to appear on the console,then into the InfoBox under CoronaVirus Cases.

I need to get back only “todayCases” not all the data

When you say, “get back”, do you mean to only get “todayCases” back from your API? I’m not sure how I can answer that - that would depend on how the API is set up and how you are calling it.

Do you mean that you only want that stored on state? Then inside that second then block you would need to do something.

But based on what I’ve seen, countryInfo is not an object but is an array of objects. Where are you trying to find “todayCases”? Does each object in that array have that property? Then you would need to loop through and hit those properties. Do you mean that countryInfo should be an object with a property called “todayCases”? I don’t know because all I see are arrays of objects and I have no idea what are in those objects.

I see a mismatch between what your data actually is and how you are trying to access it. You need to figure out exactly what is being returned and what you want from it. Once you figure that out, you can figure out how to access it.

My Api consists of
{
“CountryName”:" kalabta", “todayCases”:“15”, “CoronaRecovered”:“12”,“CoronaDeaths”:“0” },…
So,yes I need to access “todayCases” property from this api when I select the country in the dropdown.Yes,each object in this array have that property. I don’t know the syntax how to write it in react :confused:

how to write it in react

This is not specific to React, this is a JS issue.

You have data that has this schema:

const countryInfo = [
  { todayCases: 1, other: 'stuff' },
  { todayCases: 5, other: 'stuff' },
  { todayCases: 12, other: 'stuff' },
  { todayCases: 4, other: 'stuff' },
  { todayCases: 135, other: 'stuff' },
  { todayCases: 6, other: 'stuff' },
  { todayCases: 0, other: 'stuff' },
];

From what I understand, you are confused as to why I can’t access countryInfo.todayCases. That’s because it doesn’t exist. I don’t understand what you are looking for. Something like countryInfo[0].todayCases? countryInfo doesn’t have that property, but the objects in that array have the property, which probably means that there are many “todayCases”.

So, I think it boils down to some possibilities:

  1. You are expecting back a single object instead of an array. This would mean that either the API is broken or you are misusing it.
  2. You want the API to return the array but you only want a single value from that. That could be:
    a. You want to find a specify element and use that property from there.
    b. You want to reduce/combine all those value into one value.

I don’t know which you want. Since you are focussed on Keblata (in some places it is “keblata” and in some it is “kalabta”), it makes me think that you are thinking of the former. I don’t know because I still don’t have the full scope of the data.

If the data is an array of elements for different country names and you want to only get back the one data object for that one country, then you need to figure out the API.

If you want the data to be an array of objects, and the objects are different countries, you’ll have to do something like a find on the array to find the data you want - if that’s all you want, you can do it in the second then block.

If you want the data to be an array of objects, and the objects are the same country but all of the objects have “todayCases” properties, then you have to figure out which one you want or how you want to combine them all together.

ok ,I’ll work on solving this issue ,taking into consideration the notes you have given .Thank you .

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