如何基于另一个数组对象的某些属性创建对象数组？

Question

此数据：

const cocktail = [
{
"idDrink":"13070",
"strDrink":"Fahrenheit 5000",
"strGlass":"Shot glass",
"strInstructions":"Cover bottom of shot gla",
"strIngredient1":"Firewater",
"strIngredient2":"Absolut Peppar",
"strIngredient3":"Tabasco sauce",
"strIngredient4":null,
"strMeasure1":"1/2 oz ",
"strMeasure2":"1/2 oz ",
"strMeasure3":"1 dash ",
"strMeasure4":null
}
]

我希望返回一个对象数组，这些对象填充strMeasure[n]和trIngredient[n]非null值：

[
{
strMeasure1: value,
strIngredient1: value
},
{
strMeasure2: value,
strIngredient2: value
},
…
]

从上面的cocktail阵列，理想的输出是：

[
{
measure: '1/2 oz',
name: 'Firewater'
},
{
measure: '1/2 oz',
name: 'Absolut Peppar'
},
{
measure: '1 dash',
name: 'Tobasco sauce'
},
]

Answer 1

这应该是

用途：

• Object.entries(cocktail[0])从数据中获取[key，value]的数组
• filter以获取配料和度量，并忽略具有null值的配料和度量
• reduce来构建生成的阵列

像这样：

const cocktail = [
{
"idDrink":"13070",
"strDrink":"Fahrenheit 5000",
"strGlass":"Shot glass",
"strInstructions":"Cover bottom of shot gla",
"strIngredient1":"Firewater",
"strIngredient2":"Absolut Peppar",
"strIngredient3":"Tabasco sauce",
"strIngredient4":null,
"strMeasure1":"1/2 oz ",
"strMeasure2":"1/2 oz ",
"strMeasure3":"1 dash ",
"strMeasure4":null
}
]
const result = Object.entries(cocktail[0])
.filter(([k,v])=>v && k.match(/^str(Ingredient|Measure)d+$/))
.reduce((acc, [k, v]) => {
const [t, n] = k.match(/^str(Ingredient|Measure)(d+)$/).slice(1);
acc[n-1] = {...acc[n-1], [t]:v};
return acc;
}, [])
console.log(result);

你也可以在没有过滤步骤的情况下完成

const result = Object.entries(cocktail[0])
.reduce((acc, [k, v]) => {
if (v) {
const [t, n] = k.match(/^str(Ingredient|Measure)(d+)$/)?.slice(1) ?? [] ;
acc[n-1] = {...acc[n-1], [t]:v};
}
return acc;
}, [])
console.log(result);

Answer 2

使用javascripts-map((方法从数组中的对象中解析出特定的键值对似乎可以从中受益。还有几种方法可以从对象内部提取所需的值，例如通过点表示法。我在这里附上了一些非常有用的链接，这些链接将让你对如何实现这一目标有更深入和基本的了解。

从对象数组中提取属性值作为数组

https://bobbyhadz.com/blog/javascript-convert-array-of-objects-to-array-of-values

https://www.freecodecamp.org/news/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/

Answer 3

您可以首先创建一个具有measure和id的对象数组。然后使用id从鸡尾酒阵列中获得值

const cocktail = [{
"idDrink": "13070",
"strDrink": "Fahrenheit 5000",
"strGlass": "Shot glass",
"strInstructions": "Cover bottom of shot gla",
"strIngredient1": "Firewater",
"strIngredient2": "Absolut Peppar",
"strIngredient3": "Tabasco sauce",
"strIngredient4": null,
"strMeasure1": "1/2 oz ",
"strMeasure2": "1/2 oz ",
"strMeasure3": "1 dash ",
"strMeasure4": null
}]
const obj = [];
for (let keys in cocktail[0]) {
if (keys.includes('strIngredient')) {
const tempObj = {
measure: cocktail[0][keys],
id: keys.charAt(keys.length - 1)
}
obj.push(tempObj)
}
}
obj.forEach((elem) => elem.value = cocktail[0][`strMeasure${elem.id}`])
console.log(obj)

Answer 4

Lodash如果您不介意

const cocktail = {"idDrink":"13070","strDrink":"Fahrenheit 5000","strGlass":"Shot glass","strInstructions":"Cover bottom of shot gla","strIngredient1":"Firewater","strIngredient2":"Absolut Peppar","strIngredient3":"Tabasco sauce","strIngredient4":null,"strMeasure1":"1/2 oz ","strMeasure2":"1/2 oz ","strMeasure3":"1 dash ","strMeasure4":null};

const parseKey = (str) => [...str.matchAll(/(strIngredient|strMeasure)(d+)/g)].flat();

const maping = { strIngredient: 'name', strMeasure: 'measure' };
const iter = (acc, value, key) => {
const [,  keyName, keyNumber] = parseKey(key);
if (value && keyName) {
acc[keyNumber] ??= {};
acc[keyNumber][maping[keyName]] = value;
}
return acc;
};
const result = _(cocktail).transform(iter, {}).values();
console.log(result);

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

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>