Как я могу вывести несколько результатов из массива

#javascript #arrays

#javascript #массивы

Вопрос:

У меня есть этот массив объектов, в котором изначально были только поля name и unit. Недавно я добавил поле unitConv типа array.

Раньше я выводил массив строк с именем и единицей из каждого объекта.

 const ingredients = [
  {name: 'wine', unit: 'ml', unitConv: []},
  {name: 'salt', unit: 'gr', unitConv: [{unitMeasure: { name: 'spoon'}}, {unitMeasure: { name: 'tea-spoon'}}]},
  {name: 'onion', unit: 'piece', unitConv: []},
]

const response = ingredients.map(ing => `${ing.name} [${ing.unit}]`)
 

И это ответ:

 ["wine [ml]", "salt [gr]", "onion [piece]"]
 

Теперь, когда я добавил unitConv , я хочу посмотреть, доступны ли какие unitConv -либо из них в объекте, и передать их также в качестве параметров, например:

 ["wine [ml]", "salt [gr]", "onion [piece]", "salt[spoon]", "salt[tea-spoon]"]
 

И я также хочу сохранить начальное значение salt , то, которое использует «gr» как единицу. Итак, для salt, поскольку у меня есть один unit и два unitConv, я хочу вывести его три раза с каждым из этих параметров.
Если один из объектов не имеет unitConv, поля unitConv будут отображаться в виде пустого массива, как в примере выше.

Комментарии:

1. Подходит ли вам мой ответ?

2. Да, это так, спасибо!

Ответ №1:

Вы можете использовать Array#flatMap для создания второго массива для объединения с первым.

 const ingredients = [
  {name: 'wine', unit: 'ml', unitConv: []},
  {name: 'salt', unit: 'gr', unitConv: [{unitMeasure: { name: 'spoon'}}, {unitMeasure: { name: 'tea-spoon'}}]},
  {name: 'onion', unit: 'piece', unitConv: []},
]

const response = ingredients.map(ing => `${ing.name} [${ing.unit}]`)
     .concat(ingredients.flatMap(({name, unitConv})=>
         unitConv.map(x => `${name} [${x.unitMeasure.name}]`)));
console.log(response); 

Ответ №2:

простой метод уменьшения массива:

 const ingredients = 
        [ { name: 'wine', unit: 'ml', unitConv: [] } 
        , { name: 'salt', unit: 'gr', unitConv: 
              [ { unitMeasure: { name: 'spoon'     } } 
              , { unitMeasure: { name: 'tea-spoon' } } 
              ] 
          } 
        , { name: 'onion', unit: 'piece', unitConv: [] } 
        ] 

const resp2 = ingredients.reduce((resp,{name,unit,unitConv}) =>
        {
        resp.push( `${name} [${unit}]` )
        unitConv.forEach(({unitMeasure}) =>
          resp.push(`${name} [${unitMeasure.name}]`))
        return resp
        },[])

console.log( resp2 ) 
 .as-console-wrapper{max-height:100% !important;top: 0;} 

Ответ №3:

вы можете использовать flatMap и внутри его функции обратного вызова проверить наличие массива unitConv lentgh, если это правда, то вы можете использовать для этого карту. вот демонстрация:

 const ingredients = [{
    name: 'wine',
    unit: 'ml',
    unitConv: []
  },
  {
    name: 'salt',
    unit: 'gr',
    unitConv: [{
      unitMeasure: {
        name: 'spoon'
      }
    }, {
      unitMeasure: {
        name: 'tea-spoon'
      }
    }]
  },
  {
    name: 'onion',
    unit: 'piece',
    unitConv: []
  },
]

function strFormat(name, unit) {
  return `${name} [${unit}]`;
}

const result = ingredients.flatMap((ing) => {
  if (ing.unitConv.length) {
    const ingAllUnits = ing.unitConv.map((unit) => strFormat(ing.name, unit.unitMeasure.name));
    ingAllUnits.push(strFormat(ing.name, ing.unit));
    return ingAllUnits;
  } else return strFormat(ing.name, ing.unit);
});

console.log(result);