#javascript #json
#javascript #json
Вопрос:
В Json есть несколько источников изображений, таких как «src»: «image.png», , «src»: «image2.png»,
Для image.png прямо сейчас я выбираю значение X как «40» [3-я позиция на изображении ниже]
Для image2.png прямо сейчас я выбираю значение X как «100» [6-я позиция на изображении ниже]
Требование :
Вместо этого мне нужно добавить значения 1-й (10) 3-й (40) 4-й (50) позиций и получить окончательное значение X для "src" : "image.png" , равное 100 [10 40 50] и
"src" : "image1.png" = 1-я (10) 6-я (100) 7-я (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); Ответ №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
Надеюсь, это поможет 🙂
Ответ №2:
Вы можете сделать это с помощью рекурсии. При переходе к вложенному объекту obj вы могли бы создать родительское x значение для каждого элемента в layers и проверить, добавляет ли элемент в свойстве layers have 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); Комментарии:
1. Еще раз спасибо за вашу помощь, поскольку другой ответ дал ответ до 3 минут, я принял этот ответ….
2. @vickeycolors Время не имеет значения при предоставлении ответа. Важно то, что они короткие и эффективные, и я думаю, что мой код лучше. И если вы не хотели принимать мой ответ, вам не следовало просить меня о такой большой помощи. что ж, если вы считаете, что его код лучше, так что никаких проблем
Ответ №3:
Вот мое решение с рекурсией и мутацией. Вы можете клонировать массив раньше, если не хотите изменять его напрямую.
// 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) Ответ №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); Ответ №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)));