Loop over an object

Question

I'm decoding an object and so far I got it working. Let's say I have this object:

var person = [{
   firstname: "Mike",
   lastname: "123&ntilde;&ntilde;&ntilde;"
   age: 20
}]

So in order to decode &ntilde and render ñ, I'm simply doing this:

new DOMParser().parseFromString(person[0].lastname, "text/html").documentElement.textContent;

and this will render the value

ñññ

which is what I want, so it will look like this:

lastname: "ñññ"

However, the issue that I'm facing is that I need to decode values for each property in the object because I may get those special characters for firstname or other properties. So my question is how to decode property values on an object assuming that the object may look like this:

var person = [{
   name: "Mike",
   lastname: "123&ntilde;&ntilde;&ntilde;"
   age: 20,
   employeer: {
     name: 'ABC Company &ntilde;&ecirc;',
     supervisors:[
         {
           name: 'Steve&auml;',
           code: '&egrave;468'
         }
     ]
   }
}]

NOTE:

I don't need help on decoding that values of each property on my object, since I'm already doing that, I just need to come up with a recursive function that will do that on a nested object

I would ask why you have such a weird object in the first place. — melpomene, Dec 21 '18 at 16:45
@melpomene they've allowed those special characters in the data Base and now they should be rendered properly on the UI. — Devmix, Dec 21 '18 at 16:47
I guess you'll need to use a recursive function which goes through all the props of the object, like [here](https://stackoverflow.com/questions/15690706/recursively-looping-through-an-object-to-build-a-property-list) — najayaz, Dec 21 '18 at 16:47
@G-man Yes I think I'll need like a recursive function. Any approaches? — Devmix, Dec 21 '18 at 16:48
Have you looked into using something like lodash? https://lodash.com/ — AndrewBrntt, Dec 21 '18 at 16:52
Possible duplicate of [Unescape HTML entities in Javascript?](https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript) — Liam, Dec 21 '18 at 16:53
@AndrewBrntt Yes, I'm using lodash but not sure how to implement it :( — Devmix, Dec 21 '18 at 16:53
@Liam This is not a duplicate. Because I'm already decoding the values, but now I'm taking it to the next level where I need to decode all those values for a nested object — Devmix, Dec 21 '18 at 16:54
another duplicate [HTML Entity Decode](https://stackoverflow.com/questions/5796718/html-entity-decode) — Liam, Dec 21 '18 at 16:56
Agree, but again I'm ALREADY unescaping OR decoding the values. I don't need help with that, but how to come up with a recursive function that will do that on each property — Devmix, Dec 21 '18 at 16:56
[Iterate through object properties](https://stackoverflow.com/questions/8312459/iterate-through-object-properties) — Liam, Dec 21 '18 at 16:57

score 1 · Accepted Answer · answered Dec 21 '18 at 17:00

I think a recursive decode using DOMParser is a good idea. Here's an in-place transformer. Perform a deep copy first and then transform in-place if you prefer.

var person = [{
   name: "Mike",
   lastname: "123&ntilde;&ntilde;&ntilde;",
   age: 20,
   employer: {
     name: 'ABC Company &ntilde;&ecirc;',
     supervisors: [
         {
           name: 'Steve&auml;',
           code: '&egrave;468'
         }
     ]
   }
}];
console.log(person);

function htmlDecode(input)
{
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

function fix(obj) {
   for (let prop in obj) {
      switch (typeof obj[prop]) {
        case 'object':
          fix(obj[prop]);
          break;
        case 'string':
          obj[prop] = htmlDecode(obj[prop]);
          break;
      }
   }
}

fix(person);
console.log(person);

score 0 · Answer 2 · answered Dec 21 '18 at 17:00

in functional languages there are libraries to recursively walk tree scructures. In clojure there is the zipper and walk for example.

you could write it yourself but it will quickly get complicated so I suspect using JSON.stringify + parse would give you what you need. Both functions take second argument that's replacer and reviver respectively that allow you to intercept the transformations and alter the values.

Here is example from the official documentation:

function replacer(key, value) {
  // Filtering out properties
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
}

var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7};
JSON.stringify(foo, replacer);
// '{"week":45,"month":7}'

score 0 · Answer 3 · answered Dec 21 '18 at 17:02

Try this:

function decodeObject(obj){
  if(typeof obj == 'object'){
    var text = JSON.stringify(obj),
      div = document.createElement('div');
      div.innerHTML = text;
      obj = JSON.parse(div.childNodes[0].nodeValue);
  }

  return obj;
}


var person = decodeObject([{
   name: "Mike",
   lastname: "123&ntilde;&ntilde;&ntilde;",
   age: 20
}]);



console.log(person);

Loop over an object

3 Answers3