Dans un Json, il existe plusieurs sources d'images comme "src": "image.png", , "src": "image2.png",
Pour image.png, en ce moment je récupère la valeur X comme "40" [3e position dans l'image ci-dessous]
Pour image2.png, en ce moment je récupère Valeur X comme "100" [6ème position dans l'image ci-dessous]
Condition :
Au lieu de cela, je dois ajouter le 1er (10) + 3e (40) + 4e (50) positionne les valeurs et récupère la valeur X finale pour "src": "image.png" , sous la forme 100 [10 + 40 + 50] et
"src": "image1.png" = 1er (10) + 6e (100) + 7e (105) positions et valeur finale de X est 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);
5 Réponses :
En utilisant une fonction récursive, vous pouvez trouver tous les src et ses valeurs x additionnées correspondantes.
Voici un exemple brut. Refactorisez comme bon vous semble.
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);
Voici le CodePen pour le même: https://codepen.io/anon/ pen / Wmpvre
J'espère que cela vous aidera :)
Vous pouvez le faire en utilisant la récursivité . En passant par un obj imbriqué, vous pouvez parent x la valeur de chaque élément dans couches et vérifier si l'élément dans couches a src code > propriété ajoute la valeur x précédente.
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);
Merci encore pour votre aide, comme l'autre réponse a donné une réponse avant 3 minutes, j'ai accepté cette réponse ....
@vickeycolors Le temps n'a pas d'importance pour répondre. Ce qui compte est court et efficace et je pense que mon code est meilleur. Et si vous n'aviez pas accepté ma réponse, vous n'auriez pas dû me demander autant d'aide.Eh bien si vous pensez que son code est meilleur alors pas de problème
Voici ma solution avec récursion et mutation. Vous pouvez cloneDeep le tableau avant si vous ne voulez pas le muter directement.
// 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)
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);
Voici ma solution. Vérifiez ceci
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)));