Changing all key value pairs in an object with a for loop

I am using React and JavaScript. I am trying to take an existing object with key-value pairs and make every value of the key-value pairs equal to null.

I tried using a for loop with the in keyword. Getting each key-value pair and changing it to null, but something goes wrong and I don't know how to fix it.

let myObj = {name: 'Bob', lname: 'Johnson'};
for (let x in myObj) {
    myObj.x = null;
}

return myObj;

I want the myObj variable to get all of its key-value pairs to equal to null. End Result:

myObj = {name: null, lname: null};

You need to access the property by its name instead of accessing the property x on the object.

let myObj = {name: 'Bob', lname: 'Johnson'}

for (let x in myObj) {
    myObj[x] = null
}

console.log(myObj)

Prior to this Angular 6.1 release we cannot iterate directly through objects key values & maps using *ngFor directive. To tackle this issue Angular keyvalue pipe has been introduced. This keyvalue pipe converts Object or Map into an array of key value pairs. Converted array will be sorted by keys according to unicode values.

Remember when you do

obj.x = 'some value'

You are actually trying to access a property named x on the object.

But when you do

obj[x] = 'some value'

Javascript will try to resolve the value of variable x and use that as the property name.

Now it should be clear that You could run a forEach on the keys of the object and setting every property to null.

Object.keys(myObj).forEach(key => myObj[key] = null)

2. Object.values() returns property values. To distinguish the benefits of Object.values() usage, let’s see how to get an object’s property values in a pre-ES2017 way. First, the property keys are collected with Object.keys(). Then a property accessor is used and the value is stored in an additional variable. Let’s see an example:

If you want to keep it immutable you can simply create a new object with the same keys.

const NullifyValues = obj => {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = null;
    return result;
  }, {})
}

const test = {
  cat: 1,
  dog: 2,
  bat: 3
}

const nullified = NullifyValues(test);
console.log(nullified) // Object { cat: null, dog: null, bat: null }

Object.keys, values, entries. For plain objects, the following methods are available: Object.keys(obj) – returns an array of keys. Object.values(obj) – returns an array of values. Object.entries(obj) – returns an array of [key, value] pairs. Please note the distinctions (compared to map for example):

Update your object to use bracket notationn instead of dot notation. This way you will use the variable x instead of the literal value "x"

See working example below:

let myObj = {name: 'Bob', lname: 'Johnson'};

for (let x in myObj) {
    myObj[x] = null; // change from myObj.x to myObj[x]
}
console.log(myObj);

The key value gives us access to the current properties key (‘key1’, ‘key2’, ‘key3’). The index provides us the index of the current item in the loop. This is simply the position of the item in the looped list (0, 1, 2). V-for with Range

One line with vanilla JS:

 Object.keys(myObj).forEach(v => myObj[v] = null)

Object.entries() returns an array whose elements are arrays corresponding to the enumerable string-keyed property [key, value] pairs found directly upon object. The ordering of the properties is the same as that given by looping over the property values of the object manually.

Don’t use non-primitive values like objects and arrays as v-for keys. Use string or numeric values instead. For detailed usage of the key attribute, please see the key API documentation. Array Change Detection Mutation Methods. Vue wraps an observed array’s mutation methods so they will also trigger view updates. The wrapped methods are

KeyValuePair wastes no memory. It is compact. Consider this example program: it has 2 versions of code, each of which store keys and values. Version 1: The keys and values are stored in 2 separate arrays. The GC.GetTotalMemory method measures the memory usage. Array GC.Collect

An object in JavaScript is a data type that is composed of a collection of names or keys and values, represented in name:value pairs. The name:value pairs can consist of properties that may contain any data type — including strings, numbers, and Booleans — as well as methods , which are functions contained within an object.

Comments
  • possible duplicate stackoverflow.com/questions/42385110/…
  • Thank you dude, this worked, now that I think about it I have used this before in my code but just couldn't think of it. Once again thanks!
  • You could do return {...result, [key]: null}; inside reduce.
  • Sure if you'd like! You could also just make it into a one liner if you wanted.
  • Nice, this works too, but I already used someone else's answer!
  • this is the proper way and its up to you ;)