在Json中将X值添加到Image

Question

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

对于image.png，现在我正在将X值提取为“ 40” [下图的第3个位置]

对于image2.png，现在我正在将X值提取为“ 100” [下图的第6个位置]

要求：

取而代之的是，我需要添加第一（10）+第三（40）+第四（50）位置的值，并获取最终X值对"src" : "image.png"，如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);

这是相同的CodePen：https：//codepen.io/anon/pen/Wmpvre

希望这可以帮助 ：）