javascript - angular for each 如何为每个子对象添加属性

Question

我正在尝试将名为“链接”的属性添加到给定对象列表的每个子对象。 该链接应该是一个 base url + 每个 'roleName' 在 child 之上。

在我的例子中，链接必须是这样的:

var baseUrl = 'http://baseUrl.com/';
link = baseUrl/Images/html5.png

或

link = baseUrl/Images/Framework/Javascript/angularJs.jpg

这是初始列表:

[
  {
    "roleName": "Images",
    "roleId": "Images",
    "children": [
      {
        "roleName": "html5.png",
        "roleId": "html5.png"
      },
      {
        "roleName": "css3.png",
        "roleId": "css3.png"
      },
      {
        "roleName": "Javascript",
        "roleId": "Javascript",
        "children": [
          {
            "roleName": "Framework",
            "roleId": "Framework",
            "children": [
              {
                "roleName": "angularJs.jpg",
                "roleId": "angularJs.jpg"
              },
              {
                "roleName": "emberJs.jpg",
                "roleId": "emberJs.jpg"
              }
            ]
          }
        ]
      },
      {
        "roleName": "Php",
        "roleId": "Php",
        "children": [
          {
            "roleName": "Framework",
            "roleId": "Framework",
            "children": [
              {
                "roleName": "laravel.jpg",
                "roleId": "laravel.jpg"
              }
            ]
          },
          {
            "roleName": "php5.jpg",
            "roleId": "php5.jpg"
          }
        ]
      }
    ]
  }
]

我的问题是我不知道如何为每个 child 添加链接，也不知道如何动态添加“图像”而不是像我目前正在做的那样硬编码。

这是我的功能，但我只为父级添加链接:

  var addLinks = function(listOfObjects, baseUrl){
    angular.forEach(listOfObjects, function(object){
        if(object.children !== 'undefined'){
            angular.forEach(object.children, function(item){
              item.link = baseUrl+'Images/'+item.roleName;
            });
        }
    });
    return listOfObjects;
  };

这是我的 Plunker 的链接如果有人想提供帮助并提前致谢。

编辑: Vikash 答案不好

当没有 child 时，我只想要对象中 child 的链接

例如:

{
       'roleName': 'Php',
       'roleId': 'Php',
       'children': [
        {
         'roleName': 'Framework',
         'roleId': 'Framework',
         'children': [
          {
           'roleName': 'laravel.jpg',
           'roleId': 'laravel.jpg',
           'link': 'http://exmaple.com/Images/Php/Framework/laravel.jpg'
          }
         ]
        },
        {
         'roleName': 'php5.jpg',
         'roleId': 'php5.jpg',
         'link': 'http://exmaple.com/Images/Php/php5.jpg'
        }
       ]
      }

Answer 1

使用与 Vikash 的解决方案相同的原理，但调整基本案例逻辑以匹配 OP 的要求，您有以下内容。

主要变化是基本情况是没有 child 的情况；如果有 child ，递归并相应地添加到 baseUrl。

Plunker

注意:这些版本修改了现有列表；这是构建/返回新列表的一小步。

var data=[
  {
    "roleName": "Images",
    "roleId": "Images",
    "children": [
      {
        "roleName": "html5.png",
        "roleId": "html5.png"
      },
      {
        "roleName": "css3.png",
        "roleId": "css3.png"
      },
      {
        "roleName": "Javascript",
        "roleId": "Javascript",
        "children": [
          {
            "roleName": "Framework",
            "roleId": "Framework",
            "children": [
              {
                "roleName": "angularJs.jpg",
                "roleId": "angularJs.jpg"
              },
              {
                "roleName": "emberJs.jpg",
                "roleId": "emberJs.jpg"
              }
            ]
          }
        ]
      },
      {
        "roleName": "Php",
        "roleId": "Php",
        "children": [
          {
            "roleName": "Framework",
            "roleId": "Framework",
            "children": [
              {
                "roleName": "laravel.jpg",
                "roleId": "laravel.jpg"
              }
            ]
          },
          {
            "roleName": "php5.jpg",
            "roleId": "php5.jpg"
          }
        ]
      }
    ]
  }
];

function addLinks(data, baseUrl) {
  data.forEach(function(e) {
    if(!e.children) {
      e.link = baseUrl + e.roleName;
    } else {
      addLinks(e.children, baseUrl + e.roleName + '/');
    }
  });
}

addLinks(data, 'http://baseUrl.com/');
document.write('<pre>' + JSON.stringify(data, null, 2) + '</pre>');