What is the proper way to loop through a JSON object and update values when a match is found

Question

I am able to loop through my JSON object values and find the string I am looking for, but i am not sure how to set the new values after it has been modified. I may be taking the wrong approach but could use some feedback on how it make it work and what the appropriate method should be.

this.specVars = {

  rgba_000000 : "rgba(0, 0, 0, 1)", //Black
  rgba_222222 : "rgba(34, 34, 34, 1)", //Dark gray
  rgba_2ba6cb : "rgba(43, 166, 203, 1)",
  rgba_336699 : "rgba(51, 102, 153, 1)", //Blue hyperlink
  rgba_ffffff : "rgba(255, 255, 255, 1)", //White

};

// Test the browser being used and drop the alpha(opacity) value from the color values when using firefox

// Convert the values in the object to an array for parsing each value

var colors = this.specVars;

var values = Object.values(colors);

for (var value of values){

  if(value.includes(', 1)')){

    value = value.replace(', 1)', ')');

    value = value.replace('rgba', 'rgb');

    //How do i set the value in the actual object?? 

    console.log(value);

  };

}

Loop with `Object.keys()` instead of `Object.values()`. Then you can retrieve each value by key, make the changes, and then assign by key. — Pointy, Jan 02 '19 at 17:07
Maybe use map or so? See https://stackoverflow.com/q/14810506/1120821 — user1120821, Jan 02 '19 at 18:23
Welcome to SO — I think your terminology is incorrect ... JSON is an initialism for "JavaScript Object Notation" and is a way to pass around JavaScirpt *objects* as text. Once you parse some JSON text (one possibility: `let xyz = JSON.parse(String)`) you end up with a JavaScript _Object_, and it is that Javascript Object that you loop through and update. You should learn the distinction between Javascript _Objects_ and their JSON _representation_. — Stephen P, Jan 02 '19 at 21:59

Vinay Sheoran · Answer 1 · 2019-01-02T17:46:19.150

1

you can simply change the value at any index like this

this.specVars['rgba_000000'] = 10;

in your case

this.specVars = {

  rgba_000000 : "rgba(0, 0, 0, 1)", //Black
  rgba_222222 : "rgba(34, 34, 34, 1)", //Dark gray
  rgba_2ba6cb : "rgba(43, 166, 203, 1)",
  rgba_336699 : "rgba(51, 102, 153, 1)", //Blue hyperlink
  rgba_ffffff : "rgba(255, 255, 255, 1)", //White

};

var colors = this.specVars;

var values = Object.values(colors);

for (var value of values){
    if(value.includes(', 34')){
      values[values.indexOf(value)] = 10;
  }
}


console.log(values);

or

var keys = Object.keys(colors);
var values = Object.values(colors);

for (var value of values){
    if(value.includes(', 34')){
      this.specVars[keys[values.indexOf(value)]] = 10;
  }
}

edited Jan 02 '19 at 17:46

answered Jan 02 '19 at 17:09

Vinay Sheoran

483
4
11

when i log the object after the loop it still shows all the original values – Jrubin Jan 02 '19 at 17:22
I want to do a string replace on the value fields, so "rgba(0, 0, 0, 1)" should become "rgb(0, 0, 0)" – Jrubin Jan 02 '19 at 17:34
you can introduce another variable . – Vinay Sheoran Jan 02 '19 at 17:45
`var keys = Object.keys(colors);` var values = Object.values(colors); for (var value of values){ if(value.includes(', 34')){ `this.specVars[keys[values.indexOf(value)]] = 10;` } } – Vinay Sheoran Jan 02 '19 at 17:45

Sagi Rika · Accepted Answer · 2019-01-02T17:31:46.483

1

Loop over the keys array. for example:

var colors = this.specVars;

var keys = Object.keys(colors);

keys.forEach(key => {

  let value = colors[key];

  if(value.includes(', 1)')){

    value = value.replace(', 1)', ')');

    value = value.replace('rgba', 'rgb');

    colors[key] = value;

    console.log(value);
  };
});

edited Jan 02 '19 at 17:31

answered Jan 02 '19 at 17:11

Sagi Rika

1,951
7
26

value is not defined here: "if(value.includes..." – Jrubin Jan 02 '19 at 17:20
Yea, I put the value decleration inside the if statement by accident. now it should work as expected :) @Jrubin – Sagi Rika Jan 02 '19 at 17:21
it is still failing at the if statement : TypeError: value is undefined; can't access its "includes" property – Jrubin Jan 02 '19 at 17:29
Copy the code now. When we want to extract the value of the current key we need to address colors[key], not keys[key]. My bad. @Jrubin – Sagi Rika Jan 02 '19 at 17:32
Happy to help :) – Sagi Rika Jan 02 '19 at 17:41

ThunderMind · Answer 3 · 2019-01-02T17:45:40.530

0

try this

this.specVars = { 
  taxinfoFormHelpTitle4 : 'title 4', 
  taxinfoFormHelpTitle5 : 'title 5', 
  taxinfoFormHelpTitle6 : 'title 6', 
  cityMissing : 'error city', 
  rgba_000000 : "rgba(0, 0, 0, 1)", //Black 
  rgba_000000_0 : "rgba(0, 0, 0, 0)", //Transparent 
  rgba_222222 : "rgba(34, 34, 34, 1)", //Dark gray 
  rgba_2ba6cb : "rgba(43, 166, 203, 1)", 
  rgba_336699 : "rgba(51, 102, 153, 1)", //Blue 
  bold : "700" };
var colors = this.specVars;

var keys = Object.keys(colors);

for (var key of keys){

  if(colors[key].includes('rgba') && colors[key].includes(', 1)')){

    colors[key]= colors[key].replace(', 1)', ')');

    colors[key] = colors[key].replace('rgba', 'rgb');

  };
}

console.log(colors)

edited Jan 02 '19 at 17:45

answered Jan 02 '19 at 17:12

ThunderMind

714
4
14

this looks correct! how do i add these values back to my json object, which will contain additional key value pairs unrelated to these colors? – Jrubin Jan 02 '19 at 17:25
@Jrubin can you please share sample of other object how it might look – ThunderMind Jan 02 '19 at 17:31
@Jrubin your json object contain same key as colors that you want to change you can simply add it in if condition ```json[key] = colors[key]``` after ```colors[key] = colors[key].replace('rgba', 'rgb');``` – ThunderMind Jan 02 '19 at 17:35
this.specVars = { taxinfoFormHelpTitle4 : 'title 4', taxinfoFormHelpTitle5 : 'title 5', taxinfoFormHelpTitle6 : 'title 6', //Errors addressMissing : 'error address', cityMissing : 'error city', //Colors //Always use lowercase letters for hex values. rgba_000000 : "rgba(0, 0, 0, 1)", //Black rgba_000000_0 : "rgba(0, 0, 0, 0)", //Transparent rgba_222222 : "rgba(34, 34, 34, 1)", //Dark gray rgba_2ba6cb : "rgba(43, 166, 203, 1)", rgba_336699 : "rgba(51, 102, 153, 1)", //Blue hyperlink //Fonts bold : "700" }; – Jrubin Jan 02 '19 at 17:36

What is the proper way to loop through a JSON object and update values when a match is found

3 Answers3