在Json中将Image的X值相加

Question

在Json中，有多个图像源，如“ src”：“ image.png”，，“ src”：“ image2.png”，

对于image.png，现在我正在获取 X值“ 40” [下图的第三位置]

对于image2.png，现在我正在获取 X值作为“ 100” [在下面图像中的第六个位置]

要求：

相反，我需要添加第1个（10）+第3个（40）+第4个（50）位置值，并为"src" : "image.png"获取最终X值，作为 100 [10 + 40 + 50]和

"src" : "image1.png" =第一（10）+第六（100）+第七（105）位置， X的最终值为215 ....

Codepen：https://codepen.io/kidsdial/pen/zbKaEJ

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 getData(data) {
var dataObj = {};
let layer1 = data.layers;
let layer2 = layer1[0].layers;

  for (i = 1; i < layer2.length; i++) {
  var x = layer2[i].x;
	

    var src = layer2[i].layers[0].src;
    
    document.write("src :" + src);
	document.write("<br>");
	
	document.write("x:" + x);
	document.write("<br>");
	
	
  }
  
}
getData(jsonData);

Answer 1

使用递归函数，您可以找到所有src及其相应的x值。

下面是一个粗略的例子。按照您认为合适的方式进行重构。

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

以下是相同的代码笔：https://codepen.io/anon/pen/Wmpvre

希望这会有所帮助：）

Answer 2

您可以使用递归来实现。通过嵌套obj时，您可以将x中的每个项目设为layers的父级，并检查layers中的元素是否具有src属性，将之前的x值添加到它。

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

Answer 3

这是我的递归和突变解决方案。如果您不想直接对其进行突变，则可以在之前克隆cloneDeep。

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

Answer 4

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 getData(data) {
  var dataObj = {};
  let layer1 = data.layers;
  let layer2 = layer1[0].layers;
  let y = layer1[0].x;
  for (i = 1; i < layer2.length; i++) {
    var x = y;
    x += layer2[i].x;
    x += layer2[i].layers[0].x;

    var src = layer2[i].layers[0].src;

    document.write("src :" + src);
    document.write("<br>");

    document.write("x:" + x);
    document.write("<br>");


  }

}
getData(jsonData);

Answer 5

这是我的解决方案。检查一下

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

var dataObj = [];
var x, src;
  
  
function getData(data) {

    let layer1 = data.layers;

    for(var i = 0; i < layer1.length; i++){

		

        if(x === 0){
          x = layer1[i].x;
          continue;
        }
            
        x = layer1[i].x;
        

        if(typeof layer1[i].layers !== 'undefined')
            createOutput(layer1[i].layers);


    }

    return dataObj;

    
}

function createOutput(dataArray){

    
    if(typeof dataArray === 'undefined'){

        dataObj.push({x: x, src: src});
        x = 0;
        getData(jsonData);
	return;

    }
        

    dataArray.forEach(element => {

        if(typeof element.layers !== 'undefined' || typeof element.src !== 'undefined'){

            x += element.x;
            src = element.src;
            createOutput(element.layers);

        }

        
    }) 
    
    
    

}

console.log(JSON.stringify(getData(jsonData)));