Извлечь HTML на основе значения вложенного массива - PullRequest
Новая
       34

Извлечь HTML на основе значения вложенного массива

0 голосов
/ 11 октября 2019

Глядя, чтобы сгруппировать и создать соответствующий HTML на основе объекта. 

const _ = require('lodash');

const items = [
  {
    value: 'fruit',
    label: 'apple',
  },
  {
    value: 'Mango',
    label: 'Mango',
    groupBy: 'fruit'
  },
  {
    value: 'Orange',
    label: 'Orange',
    groupBy: 'fruit'
  },
  // Will need to group all above by fruit, similarly
  {
    value: 'vegetable',
    label: 'artichoke',
  },
  {
    value: 'aubergine',
    label: 'aubergine',
    groupBy: 'vegetable'
  }

];

  _renderItems = () => {

    const itemsList = _.chain(items)
    .map(item => (
      this._renderItem(item)
    ))
    .value()

    return '<div class="item-container">'+ itemsList+'</div>'

  }
  _renderItem = (item = {}) => {
    console.log(item)
  }

   _renderItems()

/*
desired output
<div class="fruit">
Label:Apple
Label:Mango
Label:Orange
</div>
<div class="vegetable">
label:artichoke
label:aubergine
label:broccoli
</div>
 */

Пример кода здесь прогресса здесь https://repl.it/repls/ElectronicUsableTheories. В общем, у меня проблемы с добавлением div-обертки на основе сгруппированного значения.

Поэтому все фрукты должны быть сгруппированы. Первый ключ не будет иметь ключа groupBy, но его значение будет ключом всех следующих элементов, которые необходимо сгруппировать.

1 Ответ

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

Сгруппируйте элементы по groupBy или value, если groupBy не существует. Затем вы можете сопоставить группы. Второй параметр, который сопоставление передает обратному вызову, является ключом (значение groupBy), который можно использовать в качестве класса. При этом дополнительно сопоставьте предметы, возьмите label и отформатируйте. Объедините строку группы и строку itemList и вернитесь. 

const items = [{"value":"fruit","label":"apple"},{"value":"Mango","label":"Mango","groupBy":"fruit"},{"value":"Orange","label":"Orange","groupBy":"fruit"},{"value":"vegetable","label":"artichoke"},{"value":"aubergine","label":"aubergine","groupBy":"vegetable"}];

const _renderItem = ({ label } = {}) => `label: ${label}\n`;

const _renderItems = () =>
  _(items)
  .groupBy(o => o.groupBy || o.value) // if not groupBy use value
  .map((group, key) => {
    const itemsList = group.map(_renderItem).join('');

    return `<div class="item-container ${key}">\n${itemsList}</div>`;
  })
  .join('\n');

const result = _renderItems();

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