Получить все элементы, у которых есть массивы детей, в javascript - PullRequest
Новая
       1

Получить все элементы, у которых есть массивы детей, в javascript

0 голосов
/ 14 апреля 2020

У меня есть следующий массив 

{
    "id": "parent",
    "code": "parent",
    "children": [
        {
            "id": "rtsp",
            "code": "rtsp",
            "children": [
                {
                    "id": "001",
                    "code": "cam30",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "002",
                    "code": "cam31",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "003",
                    "code": "cam32",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "004",
                    "code": "cam10",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "005",
                    "code": "cam11",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "006",
                    "code": "cam12",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "007",
                    "code": "cam13",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "008",
                    "code": "cam14",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "009",
                    "code": "cam15",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "010",
                    "code": "cam16",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "011",
                    "code": "cam17",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "012",
                    "code": "cam18",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "013",
                    "code": "cam19",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "014",
                    "code": "cam9",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "015",
                    "code": "cam7",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "016",
                    "code": "cam8",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "017",
                    "code": "cam5",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                },
                {
                    "id": "018",
                    "code": "cam6",
                    "source": "rtsp://192.168.43.29:8554/test",
                    "sourceFullScreen": "rtsp://192.168.43.29:8554/test"
                }
            ]
        },
        {
            "id": "test",
            "code": "test",
            "children": [
                {
                    "id": "cam100",
                    "code": "cam100",
                    "source": "cam100",
                    "sourceFullScreen": "cam100"
                },
                {
                    "id": "zone-a",
                    "code": "zone-a",
                    "children": [
                        {
                            "id": "cam100a",
                            "code": "cam100a",
                            "source": "cam100a",
                            "sourceFullScreen": "cam100a"
                        }
                    ]
                },
                {
                    "id": "cam101",
                    "code": "cam101",
                    "source": "changed",
                    "sourceFullScreen": "changed"
                },
                {
                    "id": "cam102",
                    "code": "cam102",
                    "source": "cam102",
                    "sourceFullScreen": "cam102"
                },
                {
                    "id": "cam103",
                    "code": "cam103",
                    "source": "cam102",
                    "sourceFullScreen": "cam102"
                },
                {
                    "id": "cam105",
                    "code": "cam105",
                    "source": "cam105",
                    "sourceFullScreen": "cam105"
                }
            ]
        }
    ]
}

Я хочу получить все коды элементов, которые имеют дочерние элементы.

Я попробовал следующее 

    jsonfile.readFile(file)
        .then(obj => {
            json = JSON.parse(JSON.stringify(obj));
            elements = getAllParents(json);
            console.log(elements);
            $('#parent').empty();
            $('#parent').append(firstChoice);
            $('#parent').append(elements);

        })
        .catch(error => console.error(error))

.
.
.


function getAllParents(json) {
    let childP = "";

    function read(json) {
        console.log(json);
        if (json.children !== undefined) {

            for (let i = 0; i < json.children.length; i++) {
                const element = json.children[i];
                childP += read(element);
                console.log(childP)
            }

           if(childP.includes(json.code) === false) childP += `<option value="` + json.code + `" >` + json.code + `</option>`;

        }
        return childP;
    }

    return read(json);

}

проблема что я повторяю свои элементы enter image description here

что мне делать, где моя ошибка?

1 Ответ

2 голосов
/ 14 апреля 2020

Вы можете проверить, существуют ли потомки, и создать новый массив с ними. 

function getDataWithChildren(object) {
    if (!object || typeof object !== 'object' || !object.children) return;
    const children = object.children.reduce((r, o) => {
        if (o = getDataWithChildren(o)) r.push(o);
        return r;
    }, []);
    return { ...object, children };                
}

var data = { id: "parent", code: "parent", children: [{ id: "rtsp", code: "rtsp", children: [{ id: "001", code: "cam30", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "002", code: "cam31", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "003", code: "cam32", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "004", code: "cam10", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "005", code: "cam11", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "006", code: "cam12", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "007", code: "cam13", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "008", code: "cam14", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "009", code: "cam15", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "010", code: "cam16", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "011", code: "cam17", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "012", code: "cam18", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "013", code: "cam19", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "014", code: "cam9", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "015", code: "cam7", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "016", code: "cam8", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "017", code: "cam5", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }, { id: "018", code: "cam6", source: "rtsp://192.168.43.29:8554/test", sourceFullScreen: "rtsp://192.168.43.29:8554/test" }] }, { id: "test", code: "test", children: [{ id: "cam100", code: "cam100", source: "cam100", sourceFullScreen: "cam100" }, { id: "zone-a", code: "zone-a", children: [{ id: "cam100a", code: "cam100a", source: "cam100a", sourceFullScreen: "cam100a" }] }, { id: "cam101", code: "cam101", source: "changed", sourceFullScreen: "changed" }, { id: "cam102", code: "cam102", source: "cam102", sourceFullScreen: "cam102" }, { id: "cam103", code: "cam103", source: "cam102", sourceFullScreen: "cam102" }, { id: "cam105", code: "cam105", source: "cam105", sourceFullScreen: "cam105" }] }] },
    result = getDataWithChildren(data);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...