Функция Javascript filter () для фильтрации родительских элементов

#javascript #ecmascript-6 #filter

#javascript #ecmascript-6 #Фильтр

Вопрос:

У меня есть список вложенных элементов в объекте JSON. Я должен фильтровать только корневые узлы (родительские).

Ниже приведен объект JSON.

 const myJSON = [
    {
        __typename: 'Query', node:
        {
            __typename: 'Item', childItems: [Object], id: 'a', label: 'node1', url: '#', parent: null
        }
    },
    {
        __typename: 'Query', node:
        {
            __typename: 'Item', childItems: [Object], id: 'b', label: 'node2', url: '#', parent: null
        }
    },
    {
        __typename: 'Query', node:
        {
            __typename: 'Item', childItems: [Object], id: 'a', label: 'node3', url: '#', parent: 'node1'
        }
    }
]

это мой код javascript, и объект извлекается внутри переменной объекта.

Я хочу фильтровать только метки родительских узлов из вышеуказанного объекта.

Мой желаемый результат должен быть: node1 node2 node3 node4

1. Ваш «JSON» недопустим. Похоже на копирование и вставку вывода консоли. Пожалуйста, укажите массив в литеральной нотации JavaScript.

2. да, он скопирован из консоли. но это похоже на это

3. Если вам нужна помощь, предоставьте код, который воспроизводит проблему. Не нам преобразовывать этот вывод консоли в действительные данные.

4. меню [ { __typename: ‘Запрос’, узел: { __typename: ‘Элемент’, дочерние элементы: [Объект], идентификатор: ‘a’, метка: ‘node1’, URL: ‘#’, родительский: null } }, { __typename: ‘Запрос’, node: { __typename: ‘Item’, дочерние элементы: [Object], идентификатор: ‘b’, метка: ‘node2’, URL: ‘#’, parent: null } } ]

5. @trincot из-за ограничения комментариев я опубликовал только два элемента

Ответ №1:

Чтобы получить только нужные свойства после .filter() метода, вы можете использовать .map() метод для преобразования конечного массива.

Обратите внимание, что я изменил item.node.parent == null на !item.node.parent . Таким образом, он ищет не только те, которые есть null , но и те, которые являются ложными. Измените его снова на null , если это поведение, которое вы ожидаете.

Как вы можете видеть во фрагменте, использование map может указать, какое свойство массива я хочу сохранить

РЕДАКТИРОВАТЬ: отвечая на ваш комментарий, конечно, вы можете выбрать более одного свойства с помощью .map() метода, если вы форматируете его как объект. Функция filterParentAndObtainLabelAndUrl(input) возвращает метку и URL. Как вы можете видеть, вы можете легко добавить столько, сколько захотите

 const filterParentAndObtainLabelValue = (input) => {
    return input.filter(element => !element.node.parent)
        .map(element => element.node.label);
}

const filterParentAndObtainLabelAndUrl = (input) => {
    return input.filter(element => !element.node.parent)
        .map(element => {
            return ({
                label: element.node.label,
                url: element.node.url
            })
        })
}

const inputJSON = [{ "__typename": "Query", "node": { "__typename": "Item", "childItems": [null], "id": "a", "label": "node1", "url": "#", "parent": null } }, { "__typename": "Query", "node": { "__typename": "Item", "childItems": [null], "id": "b", "label": "node2", "url": "#", "parent": null } }, { "__typename": "Query", "node": { "__typename": "Item", "childItems": [null], "id": "a", "label": "node3", "url": "#", "parent": "node1" } }]

console.log('Just the label: ', filterParentAndObtainLabelValue(inputJSON))
console.log('Label and url: ', filterParentAndObtainLabelAndUrl(inputJSON))

Развернуть фрагмент