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
 
bherbruck profile image
bherbruck

Object.entries() with destructuring is friggin awesome

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
 
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 😅