Object Keys of a JSON is saving the last value

Question

People when I run Object Keys it captures the entire Object Array and updates the data of the component only not all and the output only comes the last Array value:

var obj = {
  index: {
    path: "/",
    component: "./platform/system/index/index.vue",
    meta: {
      nav: "none"
    }
  },
  teste: {
    path: "/teste",
    component: "./platform/system/index/teste.vue",
    children: {
      userList: {
        path: "/users",
        component: "./platform/system/users/index.vue",
        lazy: "base"
      },
      testList: {
        path: "/system",
        component: "./platform/system/test/system.vue",
        lazy: "base"
      }
    }
  }
};

class Access {
  static getRaiz(obj) {
    var teste = {};

    Object.keys(obj).forEach(function(item) {
      var json = obj[item],
        directory = json.component;

      Object.assign(teste, json, {
        component: "() => import('" + directory + "')"
      });
    });
    return JSON.stringify(teste, null, '\t');
  }
}


document.body.innerHTML = '<pre>' + Access.getRaiz(obj) + '</pre>';

Answer 1

The problem lies in the way the Object.assign works. This method overrides all properties in the object that already exist and adds all those that do not exist.

See a small example of this principle:

let pessoa1 = { nome: "Marco", idade : 20};

//atribuir nome e altura a pessoa1
Object.assign(pessoa1, { nome: "Serafim", altura: 1.8});

console.log(pessoa1);

Notice how the nome was replaced and the altura was added.

---

In your code when the assign:

Object.assign(teste, json, {
    component: "() => import('" + directory + "')"
});

It will replace all existing properties with the same name, specifically path and component, and so just look at the last property, the teste.

If what you want is to create a new object with a component changed, can simplify to something like:

teste[item] = json;
teste[item].component = "() => import('" + directory + "')";

Example:

var obj = {
  index: {
    path: "/",
    component: "./platform/system/index/index.vue",
    meta: {
      nav: "none"
    }
  },
  teste: {
    path: "/teste",
    component: "./platform/system/index/teste.vue",
    children: {
      userList: {
        path: "/users",
        component: "./platform/system/users/index.vue",
        lazy: "base"
      },
      testList: {
        path: "/system",
        component: "./platform/system/test/system.vue",
        lazy: "base"
      }
    }
  }
};

class Access {
  static getRaiz(obj) {
    var teste = {};

    Object.keys(obj).forEach(function(item) {
      var json = obj[item],
        directory = json.component;
      
      teste[item] = json;
      teste[item].component = "() => import('" + directory + "')";

    });
    return JSON.stringify(teste, null, '\t');
  }
}


document.body.innerHTML = '<pre>' + Access.getRaiz(obj) + '</pre>';