DEV Community

Cover image for Javascript - Object is loopable too??

Javascript - Object is loopable too??

Atif Aiman on October 02, 2021

Well, salam and hello again! Previously, I discussed array loops, from the basics of the loop to using array loop methods. If you haven't read abo...
Collapse
 
chadnaz profile image
Chad Naz •

I deal with this all the time with 3rd party APIs. Many of the ones I use return an object of objects, instead of an array of objects like most normal APIs would do.

Annoying, but not a huge deal when you can just loop a for in/of and push the objects to an array - then perform normal array methods on the data.

This post is relevant for anyone working with older/non standard/shitty APIs

Collapse
 
alserembani profile image
Atif Aiman • • Edited

Some API, they prefer putting keys as something that represent the object, such as this

{
  "Atif": {
    age: 11,
    pref: true,
  },
  "Aiman": {
    age: 21,
    pref: false,
  },
}
Enter fullscreen mode Exit fullscreen mode

This way, backend can do a better indexing for more data processing. Though I am somewhere 85-92% agree of what you said, some of them had their reason. Though supposely when dealing with API to the frontend, I do favours array of objects instead.

Cheers 😎

Collapse
 
chadnaz profile image
Chad Naz •

Good point. The only apis that return object of objects are old, outdated, and or not maintained in my experience. Which backs up your point - old technology might have needed faster indexing on the backend doing this but now a days just gimme the damn array. 😁

Collapse
 
alanxtreme profile image
Alan Daniel •

Wow i love reading these articles, it was exactly what i was looking forward to learn, i even paid to advanced js programmers to help me with teachingn me this, but noone could explain it like you. Congratulations!

Collapse
 
alserembani profile image
Atif Aiman •

Glad that this article really help you understand this. Honestly, I struggle with this concept earlier, but struggling rendering lists in React really helps me understand this, especially dealing with various APIs (with some self-ranting along the way).

Maybe some people has expertise, but only some of them have a tact on teaching things. 😁

Collapse
 
w3nl profile image
Pieter Epeüs Wigboldus •

Very useful indeed, I have also made Package to made it easier npmjs.com/package/@hckrnews/objects

Collapse
 
stpaulis profile image
St Paulis • • Edited

I don't believe that relying on a package for simple object and array manipulations will make things easier.

Collapse
 
w3nl profile image
Pieter Epeüs Wigboldus • • Edited

I think for me making the package was very good for learning to work with objects.
But I agree that it's better to learn how to do it yourself.
Always better to know how to do it in the native way than with a package/library.
But for me this package is also very useful, just so the project code is a little bit cleaner/readable, and reduce duplicate the same tricks.

Collapse
 
alanxtreme profile image
Alan Daniel •

Just a suggestion, little mistake, you put the image example from object.keys into the object.entries and its duplicated.

Collapse
 
alserembani profile image
Atif Aiman •

Haaaaa! Finally I found the error 😣

Thanks for pointing it out! Fixed them!

You are the man!

Collapse
 
samfreelancer profile image
Sameer Arora •

Very nice article. I really liked it. I have also seen your tweets, github profile etc. Are you interested in mentoring/training students? Use the below link to explore and register as a mentor.

mentorif.com/signup?ta=hm_pg_clk_or

Once you register, I'll help you get started.

Collapse
 
bherbruck profile image
bherbruck •

Object.entries() with destructuring is friggin awesome

Collapse
 
bgowrisankar profile image
b-gowri-sankar • • Edited

For getting values in the object we use object.values. So could you fix that mistake in the article?

Collapse
 
alserembani profile image
Atif Aiman •

Can you point it out in which section? I can't pinpoint the error 😅