每个如何为每个子对象添加属性的角度

时间:2015-06-21 18:59:33

标签: javascript angularjs

我正在尝试将一个名为“link”的属性添加到给定对象列表的每个子对象中。 该链接在子项之上被设置为基本网址 +每个'roleName'

在我的情况下,链接必须是这样的:

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"
          }
        ]
      }
    ]
  }
]

我的问题是我不知道如何为每个孩子添加一个链接,也是一种动态添加“图像”的方法,而不是像我现在所做的那样硬编码。

这是我的功能,但我只为父母添加链接:

  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答案不佳

我只想要没有孩子的物品中儿童的链接

例如:

{
       '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'
        }
       ]
      }

2 个答案:

答案 0 :(得分:1)

使用以下递归函数:

function add(data,baseUrl){

   for(var i=0;i<data.length;i++){
      data[i].link=baseUrl+'Images/'+data[i].roleName;
      if(data[i].children){
          add(data[i].children,baseUrl);
       }
   }
}

示例:

&#13;
&#13;
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 add(data,baseUrl){

   for(var i=0;i<data.length;i++){
      data[i].link=baseUrl+'Images/'+data[i].roleName;
      if(data[i].children){
          add(data[i].children,baseUrl);
       }
   }
}
add(data,'http://baseUrl.com/');
document.write(JSON.stringify(data,null,4));
&#13;
&#13;
&#13;

您更新的plunker:http://plnkr.co/edit/ciwXIm

答案 1 :(得分:1)

使用与Vikash解决方案相同的原则,但调整基本情况逻辑以符合OP的要求,您可以使用以下内容。

主要的变化是基本情况是没有孩子的情况;如果有孩子,那就递送一下相应地添加到baseUrl

Plunker

注意:这些版本会修改现有列表;它是构建/返回新列表的短暂跳转。

&#13;
&#13;
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>');
&#13;
&#13;
&#13;