通过属性比较对象数组，然后 append 数组中的新 object：Javascript

Question

I have two array of objects, where in the name in these needs to be compared and get the values and append it to one of the array. I was able to do it for the first level, How can I achieve the same recursively and update the object.

const arr1 = [
  {
    name: "internalcorp.com",
    children: [
      {
        name: "internalcorp.com.child1",
        children: [
          {
            name: "internalcorp.com.grandchild1",
            children: []
          },
          {
            name: "internalcorp.com.grandchild2",
            children: []
          }
        ]
      },
      {
        name: "internalcorp.com.child2",
        children: []
      }
    ]
  },
  {
    name: "internalcorpwebsite.com",
    children: [
      {
        name: "internalcorpwebsite.com.child1",
        children: []
      }
    ]
  }
];

const arr2 = [
  {
    name: "internalcorp.com",
    val1: false,
    val2: false
  },
  {
    name: "internalcorp.com.child1",
    val1: true,
    val2: true
  },
  {
    name: "internalcorp.com.grandchild1",
    val1: true,
    val2: true
  },
  {
    name: "internalcorp.com.grandchild2",
    val1: false,
    val2: true
  },
  {
    name: "internalcorp.com.child2",
    val1: true,
    val2: false
  },
  {
    name: "internalcorpwebsite.com",
    val1: false,
    val2: false
  },
  {
    name: "internalcorpwebsite.com.child1",
    val1: false,
    val2: false
  }
];

Output should look like

const res = [
  {
    name: "internalcorp.com",
    config: {
      val1: false,
      val2: false
    },
    children: [
      {
        name: "internalcorp.com.child1",
        config: {
          val1: true,
          val2: true
        },
        children: [
          {
            name: "internalcorp.com.grandchild1",
            config: {
              val1: true,
              val2: true
            },
            children: []
          },
          {
            name: "internalcorp.com.grandchild2",
            config: {
              val1: false,
              val2: true
            },
            children: []
          }
        ]
      },
      {
        name: "internalcorp.com.child2",
        config: {
          val1: true,
          val2: false
        },
        children: []
      }
    ]
  },
  {
    name: "internalcorpwebsite.com",
    children: [
      {
        name: "internalcorpwebsite.com.child1",
        className: "level-1 leaf",
        children: [],
        val1: false,
        val2: false
      }
    ],
    config: {
      val1: false,
      val2: false
    }
  }
];

Code that I tried

  const result = arr1.map((item) => {
    let config = arr2.find((p) => p.name === item.name);
    return {
      ...item,
      config: {
        val1: config.val1,
        val2: config.val2
      }
    };
  });

Answer 1

You're very close What to do:

1. Wrap your .map() in a named function so it can be called recursively (I went with addConfig )
2. In the return object of .map() , add the key/value pair children: addConfig(item.children)

That'll do the trick.

 const arr1 = [ { name: "internalcorp.com", children: [ { name: "internalcorp.com.child1", children: [ { name: "internalcorp.com.grandchild1", children: [] }, { name: "internalcorp.com.grandchild2", children: [] } ] }, { name: "internalcorp.com.child2", children: [] } ] }, { name: "internalcorpwebsite.com", children: [ { name: "internalcorpwebsite.com.child1", children: [] } ] } ]; const arr2 = [ { name: "internalcorp.com", val1: false, val2: false }, { name: "internalcorp.com.child1", val1: true, val2: true }, { name: "internalcorp.com.grandchild1", val1: true, val2: true }, { name: "internalcorp.com.grandchild2", val1: false, val2: true }, { name: "internalcorp.com.child2", val1: true, val2: false }, { name: "internalcorpwebsite.com", val1: false, val2: false }, { name: "internalcorpwebsite.com.child1", val1: false, val2: false } ]; const addConfig = (items) => items.map(item => { const { val1, val2 } = arr2.find(p => p.name === item.name); return {...item, config: { val1, val2 }, children: addConfig(item.children) }; }); const result = addConfig(arr1); console.log(result);