Получить объект с нулевыми значениями из массива вложенных объектов - PullRequest
Новая
       9

Получить объект с нулевыми значениями из массива вложенных объектов

1 голос
/ 20 октября 2019

У меня есть массив вложенных объектов. Как получить объект с нулевыми значениями, используя только определенный ключ в массиве объектов? 

let headers = [{
    title: 'Arun',
    id: 'arunId',
    onClick: 'onClickArun'
  },
  {
    title: "George",
    id: 'georgeId',
    onClick: '',
    children: [{
        title: 'David',
        id: 'davidId',
        onClick: 'onClickDavid'
      },
      {
        title: 'Patrick',
        id: 'patrickId',
        onClick: 'onClickPatrick'
      }
    ]
  },
  {
    title: 'Mark',
    id: 'markId',
    onClick: 'onClickMark'
  }
]

const headersMap = ({
  onClick,
  children
}) => (onClick ? {
  onClick
} : _.map(children, headersMap));

const headersFlatMap = _.flatMap(headers, headersMap);

const headerObj = _.reduce(_.map(headersFlatMap, 'onClick'), (ac, a) => ({ ...ac,
  [a]: null
}), {});

console.log(headerObj)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

Код работает хорошо, но есть ли способ его оптимизировать?

Ожидаемый результат: 

{
  "onClickArun": null,
  "onClickDavid": null,
  "onClickPatrick": null,
  "onClickMark": null
}

Любая помощь очень ценится. Спасибо.

Ответы [ 2 ]

1 голос
/ 20 октября 2019

Вы можете использовать метод reduce для создания рекурсивной функции, которая будет возвращать объект в результате и искать целевой ключ на любом уровне. 

let headers = [{"title":"Arun","id":"arunId","onClick":"onClickArun"},{"title":"George","id":"georgeId","onClick":"","children":[{"title":"David","id":"davidId","onClick":"onClickDavid"},{"title":"Patrick","id":"patrickId","onClick":"onClickPatrick"}]},{"title":"Mark","id":"markId","onClick":"onClickMark"}]

function get(prop, data) {
  return data.reduce((r, e) => {
    if (e[prop]) r[e[prop]] = null;
    if (e.children) Object.assign(r, get(prop, e.children))
    return r;
  }, {})
}

const result = get('onClick', headers)
console.log(result)
1 голос
/ 20 октября 2019

В headersMap вы можете создать объект со значением null { [onClick]: null }. Теперь вы можете распределить массив объектов в _.assign(), чтобы преобразовать их в один объект. 

const headers = [{"title":"Arun","id":"arunId","onClick":"onClickArun"},{"title":"George","id":"georgeId","onClick":"","children":[{"title":"David","id":"davidId","onClick":"onClickDavid"},{"title":"Patrick","id":"patrickId","onClick":"onClickPatrick"}]},{"title":"Mark","id":"markId","onClick":"onClickMark"}];

const headersMap = ({ onClick, children }) =>
  onClick ? 
    { [onClick]: null } // create the object with a null value
    : 
    _.flatMap(children, headersMap); // use flatMap to handle multiple levels

const headerObj = _.assign({}, ..._.flatMap(headers, headersMap)); // spread and merge

console.log(headerObj)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
...