JSFiddle - React, Tailwind, and code Playground

JavaScript

var myApps = {};
var myObject = [    
    {
        "Name" : "app1",
        "id" : "1",
        "groups" : [
            { "id" : "test1", 
              "name" : "test group 1", 
              "desc" : "this is a test group"
             },
            { "id" : "test2",
              "name" : "test group 2",
              "desc" : "this is another test group"
             }
        ]
    },
    {
        "Name" : "app2",
        "id" : "2",
        "groups" : [
            { "id" : "test3", 
              "name" : "test group 4", 
              "desc" : "this is a test group"
             },
            { "id" : "test4",
              "name" : "test group 4",
              "desc" : "this is another test group"
             }
        ]
    },
     {
        "Name" : "app3",
        "id" : "3",
        "groups" : [
            { "id" : "test5", 
              "name" : "test group 5", 
              "desc" : "this is a test group"
             },
            { "id" : "test6",
              "name" : "test group 6",
              "desc" : "this is another test group"
             }
        ]
    }
    
    ];
function changeName(objArray, objId, newName) {
    objArray.forEach(function(obj) {
        if (obj.id === objId) obj.Name = newName;
    });
}
 myObject.forEach(function(o) {
     myApps[o.id] = o;
 });
changeName(myObject, '3', 'This is a new name');

console.log(JSON.stringify(myObject, null, 4));

myApps['2'].Name = 'Application Dos';

console.log(JSON.stringify(myApps, null, 4));
/* function findSum(arr) 
{
  return arr.reduce(function (a, b) 
 {
    return a + b.groups.length; 
  }, 0);
}
console.log(myObject.length);
console.log(myObject);


var totalSum = 0;

for (var i = 0; i < myObject.length; i += 1) 
{
totalSum = findSum(myObject[i]);
console.log(totalSum);
} */