Цикл по массиву объектов карты

Question

все.У меня есть массив объектов карты, эти простые объекты карты имеют url: "string", css: "string", childCSS: [] свойства.Я хочу сделать это объекты внутри их свойств childCSS.Что я должен использовать?Эта рекурсия может иметь бесконечное количество детей, детей и детей.Что вы думаете об этом?У меня есть этот массив, например:

[
    {
        url: "http://example.com/1.css",
        css: "... *css for 1.css*",
        childCSS: [
            "http://example.com/1-1.css",
            "http://example.com/1-2.css"
        ]
    },
    {
        url: "http://example.com/1-1.css",
        css: "... *css for 1-1.css*",
        childCSS: [
            "http://example.com/1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-2.css",
        css: "... *css for 1-2.css*",
        childCSS: []
    },
    {
        url: "http://example.com/1-1-1.css",
        css: "... *css for 1-1-1.css*",
        childCSS: [
            "http://example.com/1-1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-1-1-1.css",
        css: "... *css for 1-1-1-1.css*",
        childCSS: []
    }
    .
    .
    .
],

Я хочу сделать этот массив, например: Дети, внутри своих детей:

[
    {
        url: "http://example.com/1.css",
        css: "... *css for 1.css*",
        childCSS: [
            {
                url: "http://example.com/1-1.css",
                css: "... *css for 1-1.css*",
                childCSS: [
                    {
                        url: "http://example.com/1-1-1.css",
                        css: "... *css for 1-1-1.css*",
                        childCSS: [
                            {
                                url: "http://example.com/1-1-1-1.css",
                                css: "... *css for 1-1-1-1.css*",
                                childCSS: []
                            }
                        ]
                    }
                ]
            },
            {
                url: "http://example.com/1-2.css",
                css: "... *css for 1-2.css*",
                childCSS: []
            }
        ]
    },
    .
    .
    .
]

Спасибо за все.Всем хорошего дня!

Answer 1

здесь вам не нужна рекурсия, вы можете сделать это, дважды выполнив итерации по вашим данным:

let data = [
    {
        url: "http://example.com/1.css",
        css: "... *css for 1.css*",
        childCSS: [
            "http://example.com/1-1.css",
            "http://example.com/1-2.css"
        ]
    },
    {
        url: "http://example.com/1-1.css",
        css: "... *css for 1-1.css*",
        childCSS: [
            "http://example.com/1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-2.css",
        css: "... *css for 1-2.css*",
        childCSS: []
    },
    {
        url: "http://example.com/1-1-1.css",
        css: "... *css for 1-1-1.css*",
        childCSS: [
            "http://example.com/1-1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-1-1-1.css",
        css: "... *css for 1-1-1-1.css*",
        childCSS: []
    }
];

let dataByUrl = {},
  urlToItem = url => dataByUrl[url];

// index all items by their url
data.forEach(item => {
  dataByUrl[item.url] = item;
});

// now let's update childCSS with the respoective items
data.forEach(item => {
  item.childCSS = item.childCSS.map(urlToItem);
});

console.log(data);

.as-console-wrapper{top:0;max-height:100%!important}

при условии, что ваш массив не содержит дочернего элемента до его родителя (что, как правило, почти всегда имеет место с такими данными) , вы можетесделать это одним махом.

let data = [
    {
        url: "http://example.com/1.css",
        css: "... *css for 1.css*",
        childCSS: [
            "http://example.com/1-1.css",
            "http://example.com/1-2.css"
        ]
    },
    {
        url: "http://example.com/1-1.css",
        css: "... *css for 1-1.css*",
        childCSS: [
            "http://example.com/1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-2.css",
        css: "... *css for 1-2.css*",
        childCSS: []
    },
    {
        url: "http://example.com/1-1-1.css",
        css: "... *css for 1-1-1.css*",
        childCSS: [
            "http://example.com/1-1-1-1.css"
        ]
    },
    {
        url: "http://example.com/1-1-1-1.css",
        css: "... *css for 1-1-1-1.css*",
        childCSS: []
    }
];

let dataByUrl = {},
  urlToItem = url => dataByUrl[url];

for (let i = data.length; i--;) {
  let item = data[i];
  dataByUrl[item.url] = item;
  item.childCSS = item.childCSS.map(urlToItem);
}

console.log(data);

.as-console-wrapper{top:0;max-height:100%!important}

Answer 2

Вы можете попробовать

a.forEach(cssObject=> {
    cssObject.childCSS=_.flatten(cssObject.childCSS.map(reference => 
         a.filter(child => child.url===reference)));
});
console.log(JSON.stringify(a, null, 4));

, где a - ваш массив css

возвращает структуру, похожую на

[
    {
        "url": "http://example.com/1.css",
        "css": "... *css for 1.css*",
        "childCSS": [
            {
                "url": "http://example.com/1-1.css",
                "css": "... *css for 1-1.css*",
                "childCSS": [
                    {
                        "url": "http://example.com/1-1-1.css",
                        "css": "... *css for 1-1-1.css*",
                        "childCSS": [
                            {
                                "url": "http://example.com/1-1-1-1.css",
                                "css": "... *css for 1-1-1-1.css*",
                                "childCSS": []
                            }
                        ]
                    }
                ]
            },
            {
                "url": "http://example.com/1-2.css",
                "css": "... *css for 1-2.css*",
                "childCSS": []
            }
        ]
    },
    {
        "url": "http://example.com/1-1.css",
        "css": "... *css for 1-1.css*",
        "childCSS": [
            {
                "url": "http://example.com/1-1-1.css",
                "css": "... *css for 1-1-1.css*",
                "childCSS": [
                    {
                        "url": "http://example.com/1-1-1-1.css",
                        "css": "... *css for 1-1-1-1.css*",
                        "childCSS": []
                    }
                ]
            }
        ]
    },
    {
        "url": "http://example.com/1-2.css",
        "css": "... *css for 1-2.css*",
        "childCSS": []
    },
    {
        "url": "http://example.com/1-1-1.css",
        "css": "... *css for 1-1-1.css*",
        "childCSS": [
            {
                "url": "http://example.com/1-1-1-1.css",
                "css": "... *css for 1-1-1-1.css*",
                "childCSS": []
            }
        ]
    },
    {
        "url": "http://example.com/1-1-1-1.css",
        "css": "... *css for 1-1-1-1.css*",
        "childCSS": []
    }
]