title: How to rename the keys of nested object in Javascript?
body: <p>I have JSON data coming from the API and I want to rename occurrences of the multiple keys. I have tried multiple approaches but no luck so far.</p>
  <p>Here's what my data look like roughly</p>
  <pre><code>{
     &quot;9ba698a4-d54c-448c-a216-10d52ed2a5a5&quot;:{
        &quot;name&quot;:&quot;x&quot;,
        &quot;data&quot;:{
           &quot;2021-05-04&quot;:{
              &quot;Amazon Simple Storage Service&quot;:123,
              &quot;Amazon Elastic Compute Cloud - Compute&quot;:123,
              &quot;sum&quot;:123,
              &quot;credits&quot;:{
                 &quot;total&quot;:-123,
                 &quot;Amazon Simple Storage Service&quot;:-123,
                 &quot;Amazon Elastic Compute Cloud - Compute&quot;:-123
              }
           },
           &quot;2021-05-07&quot;:{
              &quot;Amazon Simple Storage Service&quot;:123,
              &quot;Amazon Elastic Compute Cloud - Compute&quot;:123,
              &quot;sum&quot;:123,
              &quot;credits&quot;:{
                 &quot;total&quot;:-123,
                 &quot;Amazon Simple Storage Service&quot;:-123,
                 &quot;Amazon Elastic Compute Cloud - Compute&quot;:-123
              }
           },
           &quot;services&quot;:[
              &quot;Amazon Simple Storage Service&quot;,
              &quot;Amazon Elastic Compute Cloud - Compute&quot;
           ],
           &quot;total&quot;:123,
           &quot;credits_total&quot;:-123
        }
     }
  }
  
  </code></pre>
  <p>In the provided data, I would like to change all the instances of &quot;Amazon Simple Storage Service&quot; to &quot;S3&quot; and &quot;Amazon Elastic Compute Cloud - Compute&quot; to &quot;EC2&quot;. What are the possible ways I can modify the nested data inside the object?</p>
  <p>To work around that, I tried to modify the DOM with custom JS something like:</p>
  <pre class="lang-js prettyprint-override"><code>document.body.innerHTML = document.body.innerHTML.replace(&quot;Amazon Elastic Compute Cloud - Compute&quot;, &quot;S3&quot;);
  </code></pre>
  <p>It's working as expected but since I am passing the object to chart JS it's not updating the occurrences on the Chart.</p>
  <p>Any guide/help would be highly appreciated.</p>