Add the X values in Json with respect to Image

Using a recursive function you can find all the src and its corresponding summed x values.

Below is a crude example. Refactor as you see fit.

let jsonData = {
  

  "layers" : [
    {
      "x" : 10,   
      "layers" : [
        {
          "x" : 20,          
          "y" : 30,         
          "name" : "L2a"
        },
        {
          "x" : 40,         
          "layers" : [
            {
              "x" : 50,            
              "src" : "image.png",
              "y" : 60,              
              "name" : "L2b-1"
            },
            {
              
              "x" : 70,
              "y" : 80,             
              "name" : "L2b-2"
            }
          ],
          "y" : 90,         
          "name" : "user_image_1"
        },
        {
          "x" : 100,         
          "layers" : [
            {
              "x" : 105,             
              "src" : "image2.png",
              "y" : 110,             
              "name" : "L2C-1"
            },
            {            
              "x" : 120,
              "y" : 130,            
              "name" : "L2C-2"
            }
          ],
          "y" : 140,         
          "name" : "L2"
        }
      ],
      "y" : 150,      
      "name" : "L1"
    }
  ]
};

function getAllSrc(layers){
  let arr = [];
  layers.forEach(layer => {
    if(layer.src){
      arr.push({src: layer.src, x: layer.x});
    }
    else if(layer.layers){
      let newArr = getAllSrc(layer.layers);
      if(newArr.length > 0){
        newArr.forEach(({src, x}) =>{
          arr.push({src, x: (layer.x + x)});
        });
      }
    }
  });
  return arr;
}

function getData(data) {
  let arr = getAllSrc(data.layers);
  for (let {src, x} of arr){
  document.write("src :" + src);
	document.write("<br>");
	
	document.write("x:" + x);
	document.write("<br>");
  }   
  
}
getData(jsonData);

Here is the CodePen for the same: https://codepen.io/anon/pen/Wmpvre

Hope this helps :)


You can do that using recursion. While going though nested obj you could parent x value each item in layers and check if the element in layers have src property add the previous x value to it.

let jsonData = {
  "layers" : [
    {
      "x" : 10,   
      "layers" : [
        {
          "x" : 20,          
          "y" : 30,         
          "name" : "L2a"
        },
        {
          "x" : 40,         
          "layers" : [
            {
              "x" : 50,            
              "src" : "image.png",
              "y" : 60,              
              "name" : "L2b-1"
            },
            {
              
              "x" : 70,
              "y" : 80,             
              "name" : "L2b-2"
            }
          ],
          "y" : 90,         
          "name" : "user_image_1"
        },
        {
          "x" : 100,         
          "layers" : [
            {
              "x" : 105,             
              "src" : "image2.png",
              "y" : 110,             
              "name" : "L2C-1"
            },
            {            
              "x" : 120,
              "y" : 130,            
              "name" : "L2C-2"
            }
          ],
          "y" : 140,         
          "name" : "L2"
        }
      ],
      "y" : 150,      
      "name" : "L1"
    }
  ]
};


function changeData(obj,x=0){
  if(obj.src) obj.x += x;
  if(obj.layers){
    for(const item of obj.layers){
      changeData(item,x+obj.x || 0);
    }
  }
}
changeData(jsonData);

function showData(obj){

  if(obj.src) document.body.innerHTML += `src:${obj.src}<br>
  x:${obj.x}<br>`;
  if(obj.layers){
    for(let i of obj.layers) showData(i)
  }
}
showData(jsonData);
console.log(jsonData);


Here is my solution with recursion and mutation. You can cloneDeep the array before if you don't want to mutate it directly.

// Code
function recursion(obj, currentX = 0) {
  if(obj.src) obj.x = currentX
  else if(obj.layers) {
    obj.layers.forEach(subObj => recursion(subObj, (currentX + subObj.x))) 
  } 
}

// Data
let jsonData = {
  "layers" : [
    {
      "x" : 10,   
      "layers" : [
        {
          "x" : 20,          
          "y" : 30,         
          "name" : "L2a"
        },
        {
          "x" : 40,         
          "layers" : [
            {
              "x" : 50,            
              "src" : "image.png",
              "y" : 60,              
              "name" : "L2b-1"
            },
            {
              
              "x" : 70,
              "y" : 80,             
              "name" : "L2b-2"
            }
          ],
          "y" : 90,         
          "name" : "user_image_1"
        },
        {
          "x" : 100,         
          "layers" : [
            {
              "x" : 105,             
              "src" : "image2.png",
              "y" : 110,             
              "name" : "L2C-1"
            },
            {            
              "x" : 120,
              "y" : 130,            
              "name" : "L2C-2"
            }
          ],
          "y" : 140,         
          "name" : "L2"
        }
      ],
      "y" : 150,      
      "name" : "L1"
    }
  ]
};

// Use
recursion(jsonData)

console.log(jsonData)