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)