вернуть несколько элементов в array.map / Subcategories в выпадающем списке

Question

вернуть несколько элементов в array.map / Subcategories в выпадающем списке

1

Я использую array.map для прокрутки вложенного массива. indicatorCategories - это мой первый массив, который содержит имя и идентификатор, а также вложенный массив с индикаторами.

Я сопоставляю эти индикаторы с выпадающим списком в реакционной бутстрапе, но мне также нужно сопоставить имя категории.

В настоящее время это код, который у меня есть.

{indicatorCategories.map(indicatorCategory => {
            return (
              (
                <option
                  disabled
                  key={indicatorCategory.id}
                  value={indicatorCategory.id}
                >
                  {"---" + indicatorCategory.name + "---"}
                </option>
              ),
              indicatorCategory.indicators.map(indicator => {
                return (
                  <option key={indicator.id} value={indicator.id}>
                    {indicator.name}
                  </option>
                );
              })
            );
          })}

В результате я показываю только индикаторы, индикаторные категории не отображаются. Я думаю, array.map не хочет возвращать элемент и отображать его по вложенному массиву? Или я просто делаю глупую синтаксическую ошибку? Борьба с ним на некоторое время, но без сигары.

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

Благодарю.

BartKrul 04 дек. 2017, в 16:39

Источник

0

Я думаю, что вы ищете, это метод flatMap (который не является родным в js). Посмотрите, что здесь происходит: пример JS flatMap: gist.github.com/samgiles/762ee337dff48623e729 . Разница между картой и flatMap: baeldung.com/java-difference-map-and-flatmap
PaulDennetiere 04 дек. 2017, в 15:36
0

упрощенно, вы возвращаете что-то вроде (a, [b, c, d]) , которое оценивается как [b, c, d] . Попробуйте вместо этого [a, [b, c, d]] . Другими словами, заменить return (...) на return [...] ;
xs0 04 дек. 2017, в 15:41
0

Не очень понятно, в чем здесь проблема. Ваш код генерирует именно то, что он должен. Можете ли вы уточнить конечную цель? Список ящиков для селекции? Поле выбора, в котором отображается industryCategories, чтобы при выборе industryCategory в качестве опции отображались индикаторы?
asosnovsky 04 дек. 2017, в 15:42
0

@ xs0, это решает мою проблему!
BartKrul 04 дек. 2017, в 17:18

Показать ещё 2 комментария

Теги:

javascript

arrays

1 ответ

Ещё вопросы

Я думаю, что вы ищете, это метод flatMap (который не является родным в js). Посмотрите, что здесь происходит: пример JS flatMap: gist.github.com/samgiles/762ee337dff48623e729 . Разница между картой и flatMap: baeldung.com/java-difference-map-and-flatmap
упрощенно, вы возвращаете что-то вроде (a, [b, c, d]) , которое оценивается как [b, c, d] . Попробуйте вместо этого [a, [b, c, d]] . Другими словами, заменить return (...) на return [...] ;
Не очень понятно, в чем здесь проблема. Ваш код генерирует именно то, что он должен. Можете ли вы уточнить конечную цель? Список ящиков для селекции? Поле выбора, в котором отображается industryCategories, чтобы при выборе industryCategory в качестве опции отображались индикаторы?

yBrodsky · Accepted Answer · 2017-12-04T13-42-00.000Z

Вы можете делать то, что вам нужно, с комбинацией reduce и map. Вот пример с фиктивными данными, вы передаете его, чтобы реагировать.

let data = [
    {
    id: 1, 
    value: 'a',
    data: [
      {id: 11, value: 'b'}
    ]
  },
  {
    id: 2, 
    value: 'aa',
    data: [
      {id: 12, value: 'bb'},
      {id: 12, value: 'bb'},
    ]
  }
]


let results = data.reduce((acc, cur) => {
    acc = acc.concat(cur.value);

  return acc.concat(
    cur.data.map((nested) => {
        return nested.value;
    })
  )
}, []);

console.log(results)

https://jsfiddle.net/avLvxsb6/

Как вы можете видеть в результатах, у вас есть все значения из массива и вложенных массивов. Другая альтернатива - сопоставить данные, а затем сгладить результаты, чтобы у вас не было вложенных массивов. Затем вы проходите через это и визуализируете

Это также будет работать! то, что доказано в xs0, в этом случае немного проще, поскольку числовой элемент во вложенном массиве может изменяться, и категория должна быть неактивной. Я выберу это как принятый ответ, потому что я не могу принять комментарии. Благодаря вам обоим, я должен помнить array.reduce :).