Извлечь все специфические свойства из вложенного массива объектов - PullRequest
Новая
       38

Извлечь все специфические свойства из вложенного массива объектов

0 голосов
/ 01 ноября 2019

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

const headers = [{
    id: 'title1',
    title: 'Title 1',
    children: [
        {
            title: 'Children 1',
            child: [
                {
                    title: 'Child 1',
                      id: 'child1Id',
                      onClick: 'child1Click',
                      url: '/child1'
                },
                {
                    title: 'Child 2',
                    id: 'child2Id',
                    onClick: 'child2Click'
                }
            ]
      },
      {
            title: 'Children 2',
            child: [
                {
                    title: 'Child 3',
                    id: 'child3Id',
                    onClick: 'child3Click',
                },
                {
                    title: 'Child 4',
                    id: 'child4Id',
                    onClick: 'child4Click'
                }
            ]
      }
    ]
  },
  {
    id: 'title2',
    title: 'Title 2',
    privilege: '',
    children: [{
        title: 'Children 3',
        privilege: '',
        child: [{
            title: 'Child 5',
            id: 'child5Id',
            onClick: 'child3Click',
            url: '/child5',
            privilege: ''
          },
          {
            title: 'Child 6',
            id: 'child6Id',
            onClick: 'child6Click',
            url: '/child6',
            privilege: ''
          }
        ]
      },
      {
        title: 'Children 4',
        privilege: '',
        child: [{
            title: 'Child 7',
            id: 'child7Id',
            onClick: 'child7Click',
            url: '/child7',
            privilege: ''
          },
          {
            title: 'Child 8',
            id: 'child8Id',
            onClick: 'child8Click',
            url: '/child8',
            privilege: ''
          }
        ]
      }
      ]
    }
];

const routesMap = ({ onClick, children }) => (onClick ? { [onClick]: null } : _.flatMap(children, routesMap));

const routeStates = _.assign({}, ..._.flatMap(headers, routesMap));

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

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

  {
      child1Click: null,
      child2Click: null,
      child3Click: null,
      child4Click: null,
      child5Click: null,
      child6Click: null,
      child7Click: null,
      child8Click: null,
  }

Пожалуйста, советуйте. Любая помощь высоко ценится.

Ответы [ 3 ]

1 голос
/ 01 ноября 2019

Я позаимствовал решение, которое нашел здесь , чтобы создать это: 

var headers = [
    //...
];
var newObj = {};

function iterate(obj) {
    Object.keys(obj).forEach(key => {

    if (key === 'onClick') {
        newObj[obj[key]] = 'null';
    }

    if (typeof obj[key] === 'object') {
            iterate(obj[key])
        }
    })
}

iterate(headers);
console.log(newObj);
1 голос
/ 01 ноября 2019

Используя vanilla JS, вы можете использовать 3 вложенных цикла карты, чтобы получить значения onClick и вернуть объект со значением в качестве свойства. Используйте Array.flat(), чтобы преобразовать в один массив, и распространите в Object.assign(), чтобы получить объект. 

const fn = headers => Object.assign({}, ...headers
  .map(({ children }) => 
    children.map(({ child }) => child.map(({ onClick }) => ({ [onClick]: null })))
  ) // extract onClick values
  .flat(Infinity) // flatten to a single array
)

const headers = [{"id":"title1","title":"Title 1","children":[{"title":"Children 1","child":[{"title":"Child 1","id":"child1Id","onClick":"child1Click","url":"/child1"},{"title":"Child 2","id":"child2Id","onClick":"child2Click"}]},{"title":"Children 2","child":[{"title":"Child 3","id":"child3Id","onClick":"child3Click"},{"title":"Child 4","id":"child4Id","onClick":"child4Click"}]}]},{"id":"title2","title":"Title 2","privilege":"","children":[{"title":"Children 3","privilege":"","child":[{"title":"Child 5","id":"child5Id","onClick":"child3Click","url":"/child5","privilege":""},{"title":"Child 6","id":"child6Id","onClick":"child6Click","url":"/child6","privilege":""}]},{"title":"Children 4","privilege":"","child":[{"title":"Child 7","id":"child7Id","onClick":"child7Click","url":"/child7","privilege":""},{"title":"Child 8","id":"child8Id","onClick":"child8Click","url":"/child8","privilege":""}]}]}]

const routeStates = fn(headers)

console.log(routeStates)

С lodash вы можете использовать _.flatMapDeep() вместо Array.flat(): 

const fn = headers => Object.assign({}, ...
  _.flatMapDeep(headers, ({ children }) => 
    _.map(children, ({ child }) => _.map(child, ({ onClick }) => ({ [onClick]: null })))
  ) // extract onClick values and flatte
)

const headers = [{"id":"title1","title":"Title 1","children":[{"title":"Children 1","child":[{"title":"Child 1","id":"child1Id","onClick":"child1Click","url":"/child1"},{"title":"Child 2","id":"child2Id","onClick":"child2Click"}]},{"title":"Children 2","child":[{"title":"Child 3","id":"child3Id","onClick":"child3Click"},{"title":"Child 4","id":"child4Id","onClick":"child4Click"}]}]},{"id":"title2","title":"Title 2","privilege":"","children":[{"title":"Children 3","privilege":"","child":[{"title":"Child 5","id":"child5Id","onClick":"child3Click","url":"/child5","privilege":""},{"title":"Child 6","id":"child6Id","onClick":"child6Click","url":"/child6","privilege":""}]},{"title":"Children 4","privilege":"","child":[{"title":"Child 7","id":"child7Id","onClick":"child7Click","url":"/child7","privilege":""},{"title":"Child 8","id":"child8Id","onClick":"child8Click","url":"/child8","privilege":""}]}]}]

const routeStates = fn(headers)

console.log(routeStates)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
1 голос
/ 01 ноября 2019

попробуйте получить доступ к нему в цикле и получить к нему доступ, попробуйте это как объект ... 

for ( let i = 0; i < headers.length; i++ ) {

   for (let j = 0; j < headers[i].children.length; j++ ) {

     for (let k = 0; k < headers[i].children[j].child.length; j++ ) {

       console.log( headers[i].children[j].child[k].onClick);

    }

  }

}

он будет печататься следующим образом ... 

  child1Click,
  child2Click,
  child3Click,
  child4Click,
  child5Click,
  child6Click,
  child7Click,
  child8Click

если вы хотите установить для all childClick значение null, попробуйте добавить это .. 

console.log( headers[i].children[j].child[k].onClick: null);

я надеюсь, что это поможет

...