CODEWITHSUNDEEP
reactjsredux
user15811966
user15811966

Reputation: 100

How can I destruct this object and mapping in reactjs?

I try to implement this API into my project. But I can't destruct and map properly. First of all my data came from here I can fetch data with Axios without any error. Second I can destruct my some data like this

const {sol_keys, validity_checks} = maindata

and it's work but the problem is if I want to access 856 (for example) how can I access it? How can I destruct this? Or are there any alternative ways to do this?

const MarsWeather = ({apiData: {maindata: maindata}, getMainData}) => {
    useEffect(() => {
        getMainData(); //this code line fetch data
    }, [getMainData])



    const data = Object.values(maindata);


        return (
            <div>
                {data.map(d =>
                    <WeatherTable     firstUTC={d.First_UTC} 
                                      lastUTC={d.Last_UTC} 
                                      monthOrdinal= {d.Month_ordinal}
                                      northernSeason={d.Northern_season} season={d.Season}
                                      southernSeason={d.Southern_season} PRE={d.PRE}/>
                )}
            </div>
        );
    

};

const mapStateToProps = state => ({
    apiData: state.apiData,
});


export default connect(mapStateToProps, {getMainData})(MarsWeather);

In WeatherTable there is not much code, just a boilerplate. I just pass all props to components.

<h2>{firstUTC}</h2>
<h2>{lastUTC}</h2>

Just like that. And my most important question is, how I can access the values in PRE? In WeatherTable if I pass like this react say this object has a key value like av, ct, mn, max.

<h2>{PRE}</h2>

I understand this and I try to pass like that

<h2>{PRE.av}</h2> //or {PRE.ct} etc.

But if I do like that react says 'this is undefined I don't know what do you pass.' I know my question is so long. And I'm little bit confused but I try to explain much as I can. Thank you for reading this.

Upvotes: 0

Views: 96

Answers (2)

Matteo Bombelli
Matteo Bombelli

Reputation: 450

I've seen the result of the api and there are different structures related tokeys in the main object.

first 3 are like this:

"861": {
  "First_UTC": "2021-04-28T21:15:37Z",
  "Last_UTC": "2021-04-29T21:55:07Z",
  "Month_ordinal": 2,
  "Northern_season": "mid spring",
  "PRE": {
    "av": 744.378,
    "ct": 66639,
    "mn": 726.6498,
    "mx": 754.9652
  },
  "Season": "spring",
  "Southern_season": "mid autumn",
  "WD": {
    "most_common": null
  }
}

other have different structure, so first of all i think you need to separate this one from the others...

I've noticed that you have an array

"sol_keys": [
  "856",
  "858",
  "861"
]

basically this are the data i think you need to have

so the list you have to go throught is

const data = maindata.sol_keys.map(key=>maindata[`${key}`]).filter(el=>!!el)

this way you will only have the data required.

also remeber to check if an element exist before getting the value of his props

like that

{(PRE && PRE.av)?`${PRE.av}`:""}

this way will not break your application and you colud also inspect the code with the appropriate dev tools

Does this resolve your issue?

Upvotes: 1

Chamal Silva
Chamal Silva

Reputation: 73

You can access it like validity_checks[856] and like const {856:validName} = validity_checks;

Upvotes: 0

Related Questions