Q:

"decodeURIComponent" items in JSON List

I want to parse all the items in the JSON list and using the function decode, remove the HTML formatted spaces, %20 and the like.
See snippet below
My goals:

I want to change Andy%2EPeters to "Andy Peters"
I dont want to have to refer to each item as "this.product_model" using the key name.

$(document).ready(function() {
  $('.btn').click(function() {
    $(ray).each(function(index) {
      console.log("Item BEFORE Decode : " + index + ": " + $(this).text() + ": " + this.product_model);
      this.index = decodeString(this.item);
      console.log("Item AFTER Decode    : " + index + ": " + $(this).text() + ": " + this.product_model);
    });
  });
});

function decodeString(a) {
  if (typeof a != 'undefined') {
    return decodeURIComponent(a);
  } else {
    return '';
  }
}
var ray = [{
  "product_id": "1",
  "product_model": "Andy%2EPeters",
}, {
  "product_id": "2",
  "product_model": "Tom%2EHanks",
}, {
  "product_id": "1",
  "product_model": "HFJ5G1.5",
}, ];



//console setup 
var consoleLine = "<p class=\"console-line\"></p>";

console = {
  log: function(text) {
    $("#console-log").append($(consoleLine).html(text));
  }
};
.console-line {
  font-family: console;
  margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="btn" type="button" id="btn" value="Go!">
<div id="console-log"></div>

Thanks

A:

$(document).ready(function() {
  $('.btn').click(function() {
         var data = decodeURIComponent(JSON.stringify(ray).replace(/(%2E)/ig, "%20"));
         ray = JSON.parse(data);
    
         $(ray).each(function(){
            console.log(this.product_model);
         })
  });
});
var ray = [{
  "product_id": "1",
  "product_model": "Andy%2EPeters"
}, {
  "product_id": "2",
  "product_model": "Tom%2EHanks"
}, {
  "product_id": "1",
  "product_model": "HFJ5G1.5"
} ];

//console setup 
var consoleLine = "<p class=\"console-line\"></p>";

console = {
  log: function(text) {
    $("#console-log").append($(consoleLine).html(text));
  }
};
.console-line {
  font-family: console;
  margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="btn" type="button" id="btn" value="Go!">
<div id="console-log"></div>

This uses the JSON object's native stringify to parse the object to a JSON string. Before decoding is done replace all the %2E with %20 and finally decode it all together. Then parse it back to a JavaScript object.

I don't know if this is for demonstration purposes only, but generally speaking: overwriting the console is a bad idea. 

