Evaluate each object in the array and modify its attributes

Question

Evaluate each object in the array and modify its attributes

When I receive arrays of objects structured like this, my goal is to iterate through them and concatenate a variable in order to create the following links:

link: `${id}/users`
link: `${id}/add-user`

...

id= school1;

dashboardMenu = [
    {
      title: "Dashboard",
      icon: "home-outline",
      link: "/",
      home: true,
      children: undefined,
    },
    {
      title: "Users",
      icon: "person-outline",
      link: "/users",
      data: "read:users",
      children: [
        {
          title: "Users",
          link: "/users",
          data: "read:users",
        },
        {
          title: "Create User",
          link: "/add-user",
          data: "create:users",
        },
      ],
    }
 ]

javascript

Answer 1

Answer №1

One potential solution could be to iterate through the object and its nested elements, adding a specified id to each link. Here's an example of how you could implement this:

let id = "school1";
let dashboardMenu = [
  {
    title: "Dashboard",
    icon: "home-outline",
    link: "/",
    home: true,
    children: undefined,
  },
  {
    title: "Users",
    icon: "person-outline",
    link: "/users",
    data: "read:users",
    children: [
      {
        title: "Users",
        link: "/users",
        data: "read:users",
      },
      {
        title: "Create User",
        link: "/add-user",
        data: "create:users",
      },
    ],
  },
];

let result = dashboardMenu.map((o) => {
  o.link = id + o.link;
  if (o.children) {
    o.children.forEach((child) => (child.link = id + child.link));
  }
  return o;
});

console.log(result);

To apply this recursively, you could try a function like the following:

let dashboardMenu = [{
    title: "Dashboard",
    icon: "home-outline",
    link: "/",
    home: true,
    children: undefined,
  },
  {
    title: "Users",
    icon: "person-outline",
    link: "/users",
    data: "read:users",
    children: [{
        title: "Users",
        link: "/users",
        data: "read:users",
      },
      {
        title: "Create User",
        link: "/add-user",
        data: "create:users",
      },
    ],
  },
];

setNestedLink = (o, k, id) => {
  if (o[k]) {
    o[k] = id + o[k];
    if (o.children) {
      o.children.forEach((child) => setNestedLink(child, k, id));
    }
  }
  return o;
};


let result = dashboardMenu.map((o) => setNestedLink(o, "link", "school1"));

console.log(result);

Answer 2

One potential solution could be to iterate through the object and its nested elements, adding a specified id to each link. Here's an example of how you could implement this:

let id = "school1";
let dashboardMenu = [
  {
    title: "Dashboard",
    icon: "home-outline",
    link: "/",
    home: true,
    children: undefined,
  },
  {
    title: "Users",
    icon: "person-outline",
    link: "/users",
    data: "read:users",
    children: [
      {
        title: "Users",
        link: "/users",
        data: "read:users",
      },
      {
        title: "Create User",
        link: "/add-user",
        data: "create:users",
      },
    ],
  },
];

let result = dashboardMenu.map((o) => {
  o.link = id + o.link;
  if (o.children) {
    o.children.forEach((child) => (child.link = id + child.link));
  }
  return o;
});

console.log(result);

To apply this recursively, you could try a function like the following:

let dashboardMenu = [{
    title: "Dashboard",
    icon: "home-outline",
    link: "/",
    home: true,
    children: undefined,
  },
  {
    title: "Users",
    icon: "person-outline",
    link: "/users",
    data: "read:users",
    children: [{
        title: "Users",
        link: "/users",
        data: "read:users",
      },
      {
        title: "Create User",
        link: "/add-user",
        data: "create:users",
      },
    ],
  },
];

setNestedLink = (o, k, id) => {
  if (o[k]) {
    o[k] = id + o[k];
    if (o.children) {
      o.children.forEach((child) => setNestedLink(child, k, id));
    }
  }
  return o;
};


let result = dashboardMenu.map((o) => setNestedLink(o, "link", "school1"));

console.log(result);

Evaluate each object in the array and modify its attributes

Answer №1

Similar questions

Sending response error codes in nodejs can be achieved using a variety of methods

Is requestAnimationFrame not supported in iOS UIWebView?

Learning how to handle URLEncoded format in Vue JS

How is it possible for a function set to execute on click to be triggered on page load instead?

The <b-list-group-item> component in a Vue.js CLI application using bootstrap-vue is failing to render

Overcoming Time Limits: What are the best strategies for maximizing performance in my JavaScript code?

Use a for loop in html, css, and javascript to generate unique element ids with corresponding values

sophisticated HTML navigation bar

What is the best way to incorporate an asp helper within a javascript script?

String parameter with a variable

Generate a random number using the Math.random() method in Node.js/JavaScript to access a folder on the local machine

Vue-ctl project creation halted by operating system rejection

By default, configure the MUI Collapse component to be in a "collapsed" state

Having trouble retrieving JSON data from the controller while utilizing Angular's $http method

Creating elements in Polymer 2.0 is a breeze. Simply use the `createElement` method, then seamlessly import it using `Polymer

Issue with Jquery code on Mac OS Chrome - it's functional on Windows 10 Chrome though!

Tips on managing JavaScript pop-up windows with Selenium and Java

Effective ways to retrieve API response data in React JS

Maximizing Efficiency with Single Click Line Editing in the Newest Version of jqgrid

How can I add color to arrow icons in tabulator group rows?