Hi guys. I've been trying to render information from an API but I keep getting errors. My goal is to render the information along with a button that changes the page once clicked.

The information is an object that has an array of objects within it.

Below is the screenshot of the code along with sreenshot of the data I want to fetch. I want to be able to render all the information from the data within the h2 tags.

With arrays, it's straightforward cos all I have to do is map the data from the users but with objects it is more complicated.

Please I'll really appreciate if anyone can provide some help

If you can also give me advice on how to make my code cleaner I'll appreciate.

Devdevdev:
If you can also give me advice on how to make my code cleaner I'll appreciate.

You can do whatever you could with an array with an object too. Or atleast, most.

You can map through an object too. So many method to choose from, depending on your use case.

You're already doing well. Here's a pointer.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

You can convert objects to an array and then map. Use object.values to get the value within the object flatten it out and then map it.

You can map through a deeply nested object... even those contained within an array in your objects. You'd find it more interesting working with objects after reading the above MDN reference above. That's the best advice I can give you. You won't forget anything you read and implement yourself.

Devdevdev:
Hi guys. I've been trying to render information from an API but I keep getting errors. My goal is to render the information along with a button that changes the page once clicked.

The information is an object that has an array of objects within it.

Below is the screenshot of the code along with sreenshot of the data I want to fetch. I want to be able to render all the information from the data within the h2 tags.

With arrays, it's straightforward cos all I have to do is map the data from the users but with objects it is more complicated.

Please I'll really appreciate if anyone can provide some help

I thought you said you have mastered everything about the frontend? Your response is an array, get it from “res.data.results “ .

Our bosses above, una no dey code in react js abi una no want read the code. Why una dey talk about object.values and deeply nested objects.

Devdevdev:
If you can also give me advice on how to make my code cleaner I'll appreciate.

Use array.map...

{
array. map(()=>
}

You never map the user array..

Also check ya handle pagination function, their is an error on the last line..

Niel63 and tensazangetsu20 thanks. I finally figured it out and rendered the data.

Also, the pagination worked perfectly.

Thanks guys.

Devdevdev:
Niel63 and tensazangetsu20 thanks. I finally figured it out and rendered the data.

Also, the pagination worked perfectly.

Thanks guys.

This is bad code. Your users is now an array inside another array, whereas you could have gotten your data from “res.data.results “.

chukwuebuka65:


This is bad code. Your users is now an array inside another array, whereas you could have gotten your data from “res.data.results “.

Tensazangetsu20, neil63 can you tell this dude that what he is says is wrong? If I tell him myself he won't agree.

chukwuebuka65:


I thought you said you have mastered everything about the frontend? Your response is an array, get it from “res.data.results “ .

I never said I had mastered front end. I only started learning programming in September.

chukwuebuka65:


This is bad code. Your users is now an array inside another array, whereas you could have gotten your data from “res.data.results “.

What you are suggesting only works if it's a simple object such as this:
{"Firstname": Brenda, "Lastname": Colby}
With this I wouldn't have needed to map anything. I would have just typed
<h2>{users.firstname}</h2>

It won't work for the kind of object I was retrieving data from, that had nested arrays and objects.

chukwuebuka65:


This is bad code. Your users is now an array inside another array, whereas you could have gotten your data from “res.data.results “.

Have you heard of the term. All codes are garbage? We don't use words like "bad code"... as bad as it might seem to you, it's still a piece of code. That's why we have different cadres in software engineering.
You can point her to refactoring. But one thing you should know is, we all write dirty codes when we are still grasping on the concepts.

No bad codes bro! If it works, refactor if you can or have a senior review your codebase.

Devdevdev:


What you are suggesting only works if it's a simple object such as this:
{"Firstname": Brenda, "Lastname": Colby}
With this I wouldn't have needed to map anything. I would have just typed
<h2>{users.firstname}</h2>

It won't work for the kind of object I was retrieving data from, that had nested arrays and objects.

Ok you win

chukwuebuka65:


I thought you said you have mastered everything about the frontend? Your response is an array, get it from “res.data.results “ .

Our bosses above, una no dey code in react js abi una no want read the code. Why una dey talk about object.values and deeply nested objects.

Even for SO, if you ask some kind question, we go refer you to references that could help you. I no read the code but her complaint sounded familiar, so I had to point her to a learning point. If she sabi wetin she fit do with her object, she go dey better position to choose wetin go work for her.

You see how she use the "then()"

I hate that then then then then... in an asynchronous function. I like to await instead.
So you see, it is better to know, then choose than to know just one approach. Axios is bae but, you see normal fetch ehn, I no dey use am play. Na my style be that. So everybody with him own jollof

niel63:


Have you heard of the term. All codes are garbage? We don't use words like "bad code"... as bad as it might seem to you, it's still a piece of code. That's why we have different cadres in software engineering.
You can point her to refactoring. But one thing you should know is, we all write dirty codes when we are still grasping on the concepts.

No bad codes bro! If it works, refactor if you can or have a senior review your codebase.

.

Bro, a bad code is bad code. If you write a code that is suppose to execute in 1s , to execute in 10s. That’s not an efficient code. In this case , running objects.values on object with many properties will convert the object into an array of arrays which takes a torn on the cpu which would have been avoided. This is why we learn algorithms, to write efficient code and not just code that works.

chukwuebuka65:
.

Bro, a bad code is bad code. If you write a code that is suppose to execute in 1s , to execute in 10s. That’s not an efficient code. In this case , running objects.values on object with many properties will convert the object into an array of arrays which takes a torn on the cpu which would have been avoided. This is why we learn algorithms, to write efficient code and not just code that works.

Shebi you realise say me and you dey talk the same thing.
Talking about DSA way of thinking is not a bad idea. But for an entry level dev. All you need do is, put em through the paths. Explain what makes their approach a bad one since you know most start with YouTube videos and stuffs.

"In chief's voice" - "my people would say, when a market woman goes round the market and see her shop is open, she will shout... what is this... help me help me."


The above, is not supposed to make any sense if you get what I mean.

If na me write code wey u say bad, omo, I go follow you up to know how best I can make it better. And that's because I know better. You get?

Devdevdev:
Hi guys. I've been trying to render information from an API but I keep getting errors. My goal is to render the information along with a button that changes the page once clicked.

The information is an object that has an array of objects within it.

Below is the screenshot of the code along with sreenshot of the data I want to fetch. I want to be able to render all the information from the data within the h2 tags.

With arrays, it's straightforward cos all I have to do is map the data from the users but with objects it is more complicated.

Please I'll really appreciate if anyone can provide some help

Working with APIs is great. When you're ready to deploy your App, please don't use console.log. It's a bad practice. You can refactor the Api call to catch an error and return it.

Suddenly people with 50 IQ score helping out a genius with 160+ IQ score with the very basics...


What's the point using axios and async when u still had to type that long notes..
Why not use await and make your code shorter..

It's Sha simple... I bet u don't even know what fetch means.


Jumping from step A-Z

Una too like vawulence...

Hannania:
Working with APIs is great. When you're ready to deploy your App, please don't use console.log. It's a bad practice. You can refactor the Api call to catch an error and return it.

I actually forgot to remove it. Thanks though.

GREATIGBOMAN:
Suddenly people with 50 IQ score helping out a genius with 160+ IQ score with the very basics...


What's the point using axios and async when u still had to type that long notes..
Why not use await and make your code shorter..

It's Sha simple... I bet u don't even know what fetch means.


Jumping from step A-Z

I know what fetch means. I saw your silly comment and rewrote the code using just fetch.

I also added a loading state.

Hannania:
Working with APIs is great. When you're ready to deploy your App, please don't use console.log. It's a bad practice. You can refactor the Api call to catch an error and return it.

I just rewrote the code using just fetch. Anything I can improve on my code?

I'll appreciate your response. Screenshot is below.

Devdevdev:


I know what fetch means. I saw your silly comment and rewrote the code using just fetch.

I also added a loading state.

Google is surely ur friend.


Easy to know u just used fast google to type that shiit

GREATIGBOMAN:



Google is surely ur friend.


Easy to know u just used fast google to type that shiit

I didn't Google anything. I already learned how to use fetch, long before I learned how to use axios.

Devdevdev:


I didn't Google anything. I already learned how to use fetch, long before I learned how to use axios.

No Mr transgendered.


ur code and the answer here looks same.

https://stackoverflow.com/questions/66507362/react-async-and-await-not-working-with-fetch


Also... there's nothing wrong with using google as a Dev

GREATIGBOMAN:


No Mr transgendered.


ur code and the answer here looks same.

https://stackoverflow.com/questions/66507362/react-async-and-await-not-working-with-fetch


Also... there's nothing wrong with using google as a Dev

It's obvious you are a fool. How does any answer in that link resemble mine? You aren't just a fool you are clearly one with an eye defect.

What about the loading state? How did I learn to include a loading state in fetch if I didn't know fetch already?

Why are you so pained that I rewrote my code using something you said I couldn't use? Lol.

Abeg shift make I see road.

Devdevdev:


It's obvious you are a fool. How does any answer in that link resemble mine? You aren't just a fool you are clearly one with an eye defect.

Why are you so pained that I rewrote my code using something you said I couldn't use? Lol.

Abeg shift make I see road.

I can't believe u don't like it when someone does detective work on u.

GREATIGBOMAN:





I can't believe u don't like it when someone does detective work on u.

Detective lol. You aren't half as smart as you think you are. Rest abeg.

niel63:



Shebi you realise say me and you dey talk the same thing.
Talking about DSA way of thinking is not a bad idea. But for an entry level dev. All you need do is, put em through the paths. Explain what makes their approach a bad one since you know most start with YouTube videos and stuffs.

"In chief's voice" - "my people would say, when a market woman goes round the market and see her shop is open, she will shout... what is this... help me help me."


The above, is not supposed to make any sense if you get what I mean.

If na me write code wey u say bad, omo, I go follow you up to know how best I can make it better. And that's because I know better. You get?

Ok but the lady in question is not ready to learn. She didn’t even try what I suggested to her. She just rush to come and insult me. The journey of programming is a long one. I wonder how she will get far with this attitude.

Devdevdev:


Detective lol. You aren't half as smart as you think you are. Rest abeg.

....

ok.

chukwuebuka65:


Ok but the lady in question is not ready to learn. She didn’t even try what I suggested to her. She just rush to come and insult me. The journey of programming is a long one. I wonder how she will get far with this attitude.

The SheMale_ is obviously a bitter person.

Imagine how it was busy trying to correct u instead without even knowing what it was talking about.

Proud degenerate.


That person is not a lady.


transgendered take note.