Looping Over Objects.

Ever wanted to loop over an object and change all of the values? Like when you're building a react app with state and you have multiple inputs. Now maybe you want to clear all of the state with a clear button? Let me show you one way I came by from the amazing Wes Bos.

I will be showing this in vanilla JS.

First, let's make the object

const product1 = {
   name: 'Giant Sour Gummy Worm',
   price: 35.00,
   description: 'A giant gummy worm coated with sour powder and waiting to be eaten!',
   image: 'https://images.vat19.com/worlds-largest-sour-gummy-worm/worlds-largest-gummy-worm-sour-flavor-1.jpg',
   availability: 'FOR_SALE',
}

Now that we have the object we need to loop over it by changing it to an array. Using Object.entries()

Object.entries(product1)

If we console.log() that we should get something like this.

[
  [ 'name', 'Giant Sour Gummy Worm' ],
  [ 'price', 35 ],
  [
    'description',
    'A giant gummy worm dunked in sour powder and waiting to be eaten!'
  ],
  [
    'image',
    'https://images.vat19.com/worlds-largest-sour-gummy-worm/worlds-largest-gummy-worm-sour-flavor-1.jpg'
  ],
  [ 'availability', 'FOR_SALE' ]
]

Do you see how each array has two items? The first is the key and the second is the value!

Now if we simply map() over the array we can change all of the inner array values.

const mappedProduct = Object.entries(
    product1
    ).map(([key, value]) => [key, ''])

When we map over it now we must destructor the key and value with [key, value]. When we want to change all values we enter a new value like so [key, 'new value']. In this case we're just clearing the values so I left an empty string to keep it blank.

Now console.log(mappedProduct) will give us

[
  [ 'name', '' ],
  [ 'price', '' ],
  [ 'description', '' ],
  [ 'image', '' ],
  [ 'availability', '' ]
]

Awesome now all we have to do is change it back to an object! This is super simple all we need is Object.fromEntries(). Everything has to be wrapped in it, Like this.

const clearedProduct = Object.fromEntries(
  Object.entries(
    product1
  ).map(([key, value]) => [key, ''])
)

And with that we're done, if we console.log(clearedProduct) we'll get this.

{ 
  name: '', 
  price: '', 
  description: '', 
  image: '', 
  availability: '' 
}

If you're still having some trouble visualizing this, here is a replit I made

TLDR: Using Object.entries() and Object.fromEntries() we can loop over an object by turning it into an array and then back into an object

Object.fromEntries(
  Object.entries(
    objectYouWantToLoopOver
  ).map(([key, value]) => [key, ''])
)

Comments

[Sergey]

Thank you, that's a very good use case.
Learned something new for myself. 🚀