CODEWITHSUNDEEP
javascriptangularjs
adam
adam

Reputation: 555

angular for each how to add a property to each sub object

i'm trying to add a property named 'link' to each sub object of a given list of object. The link is suposed to be a base url + each 'roleName' on top of the children.

In my case the link must be like that:

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

or

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

here's the initial list:

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

My problem is that i don't know how to do to add a link to each children and also a way to add 'Images' dynamically and not hard code it like i'm doing for the moment.

here's the function i have but i'm adding only links for the parent:

  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;
  };

Here's a link to my Plunker if someone want to help and thank you in advance.

EDIT: Vikash answer is not good

I want only links for childrens in objects when there is no children

For example:

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

Upvotes: 4

Views: 195

Answers (2)

tavnab
tavnab

Reputation: 2734

Using the same principle as Vikash's solution, but tuning the base-case logic to match the OP's requirements, you have the below.

The main change is that the base-case is when there are no children; if there are children, recurse & add to the baseUrl accordingly.

Plunker

Note: These versions modify the existing list; it's a short jump to constructing/returning a new list.

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>');

Upvotes: 1

Vikash
Vikash

Reputation: 1141

Use the following recursive function :

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);
       }
   }
}

Example :

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));

Your updated plunker : http://plnkr.co/edit/ciwXIm

Upvotes: 1

Related Questions