Генерация HTML списка определений из массива

Question

Задача: Реализуйте функцию buildDefinitionList(), которая генерирует HTML список определений (теги <dl>, <dt> и <dd>) и возвращает получившуюся строку. При отсутствии элементов в массиве функция возвращает пустую строку. Экспортируйте функцию по умолчанию. Список определений следующего формата:

const definitions = [
  ['definition1', 'description1'],
  ['definition2', 'description2']
];

Мой вариант не работает:

const buildDefinitionList = (definitions) => {
    if (definitions.length > 0) {
      const value = [];
      for (const item of definitions) {
        const definition = item[0];
        const description = item[1];
        value.push(`<dt>${definition}</dt><dd>${description}</dd>`);
      }
    const secondValue = value.join('');
    return result = `<dl>${secondValue}</dl>`;
    }
    if (definitions.length == 0) {
      return '';
    }
  }

export default buildDefinitionList();

Не подскажете - где копать?

Answer 1

Функция buildDefinitionList не должна вызываться сразу при экспорте.

 const buildDefinitionList = (definitions) => {
  if (definitions.length > 0) {
    const value = [];
    for (const item of definitions) {
      const definition = item[0];
      const description = item[1];
      value.push(`<dt>${definition}</dt><dd>${description}</dd>`);
    }
    const secondValue = value.join('');
    return `<dl>${secondValue}</dl>`;
  }

  // Если definitions.length == 0
  return '';
};

export default buildDefinitionList; //<- НЕ ФУНКЦИЯ

Answer 2

У вас ошибка в строке

return result = `<dl>${secondValue}</dl>`;

Переменная result не объявлена(да и она тут не нужна)

Также, вы экспортируете результат работы функции

export default buildDefinitionList(); // () - вызывают функцию

Хотя должны экспортировать функцию, для этого вызывать ее не надо

export default buildDefinitionList;

Вот пример вашей функции, которая будет работать:

const buildDefinitionList = (definitions) => {
  if (definitions.length > 0) {
    const value = [];
    for (const item of definitions) {
      const definition = item[0];
      const description = item[1];
      value.push(`<dt>${definition}</dt><dd>${description}</dd>`);
    }
    const secondValue = value.join('');
    return  `<dl>${secondValue}</dl>`;
  }
  if (definitions.length === 0) {
    return '';
  }
}

Однако код избыточен и лучше воспользоваться встроенными методами массивов(тут лучше всего подходит reduce):

const buildDefinitionList2 = (definitions) => {
  if (definitions.length) {
    return `<dl>${definitions.reduce((acc, item) => {
      return `${acc}<dt>${item[0]}</dt><dd>${item[1]}</dd>`
    }, '')}</dl>`;
  }
  return '';
}

Рабочий пример

const definitions = [
  ['definition1', 'description1'],
  ['definition2', 'description2']
];

const buildDefinitionList2 = (definitions) => {
  if (definitions.length) {
    return `<dl>${definitions.reduce((acc, item) => `${acc}<dt>${item[0]}</dt><dd>${item[1]}</dd>`, '')}</dl>`;
  }
  return '';
}

console.log(buildDefinitionList2(definitions))

Ну и было бы не плохо, научиться смотреть ошибки в коде javascript.

P.S.: При желании, код можно уложить в одну строку

const buildDefinitionList3 = definitions => definitions.length ? `<dl>${definitions.reduce((acc, item) => `${acc}<dt>${item[0]}</dt><dd>${item[1]}</dd>`, '')}</dl>` : '';

Он не такой читабельный, однако... можно(на любителя)

БЛОГ НА HUSL

Генерация HTML списка определений из массива

Ответы (2 шт):