从数组React JS生成键值对字符串

Question

我有以下数组(foodDetailsList(

[{"food_id": 5, "quantity": 100, "quantity_unit": gm}, 
{"food_id": 45, "quantity": 200, "quantity_unit": gm}, 
{"food_id": 22, "quantity": 300, "quantity_unit": gm}]

其中，我希望创建以下变量String作为OUTPUT：

'food[0][food_id]': '5',
'food[0][quantity]': '100',
'food[0][quantity_unit]': 'gm',
'food[1][food_id]': '45',
'food[1][quantity]': '200',
'food[1][quantity_unit]': 'gm',
'food[2][food_id]': '45',
'food[2][quantity]': '200',
'food[2][quantity_unit]': 'gm'

我想试试下面的东西：

const createString = ()=>{
let finalFoodList =[];
foodDetailsList.map((food,key) =>{
finalFoodList.push({
'food['+[key]+'][food_id]'`:food.id,
'food['+[key]+'][quantity]'`:food.quantity
});
});
console.log("final variable is : ",finalFoodList.toString);
}

需要从语法上改进上述代码，以便接收上述输出。

Answer 1

您可以使用map函数迭代原始数组，然后使用Object.keys获取包含的食物对象的所有键，并映射这些键，以获得类似这样的通用解决方案：

const foodList = [
{"food_id": 5, "quantity": 100, "quantity_unit": 'gm'}, 
{"food_id": 45, "quantity": 200, "quantity_unit": 'gm'}, 
{"food_id": 22, "quantity": 300, "quantity_unit": 'gm'}]

const foodString = foodList.map((food, index) => 
Object.keys(food).map(key => `'food[${index}][${key}]': '${food[key]}'`).join('n')
).join('n');
console.log(foodString);

join()-方法将所有数组成员连接为字符串，换行符作为分隔符。

Answer 2

您可以在对象的arr上使用.map()。对于每个对象，可以对其进行解构以获得food_id、quantity和quantity_unit属性。基于此，您可以使用.map()回调中提供的索引i作为字符串中food的索引，返回所需格式的字符串。获得字符串数组后，可以使用.join('n')连接每个字符串。

参见以下示例：

const arr = [{"food_id": 5, "quantity": 100, "quantity_unit": 'gm'}, 
{"food_id": 45, "quantity": 200, "quantity_unit": 'gm'}, 
{"food_id": 22, "quantity": 300, "quantity_unit": 'gm'}];


const res = arr.map(({food_id, quantity, quantity_unit}, i) => 
`'food[${i}][food_id]': '${food_id}'n'food[${i}][quantity]': '${quantity}'n'food[${i}][quantity_unit]': '${quantity_unit}'`
).join('n');
console.log(res);

Answer 3

试试这个：

const foodList = [
{"food_id": 5, "quantity": 100, "quantity_unit": gm}, 
{"food_id": 45, "quantity": 200, "quantity_unit": gm}, 
{"food_id": 22, "quantity": 300, "quantity_unit": gm}
];
const createString = () => {
const foodLen = foodList.length;
let finalFoodList = foodList.map((food, index) => {
return index !== foodLen ? (
`'food[${index}][food_id]': '${food.food_id}',n
'food[${index}][quantity]': '${food.quanatity}',n
'food[${index}][quantity_unit]': '${food.quantity_unit}',n`
) : (
`'food[${index}][food_id]': '${food.food_id}',n
'food[${index}][quantity]': '${foof.quanatity}',n
'food[${index}][quantity_unit]': '${food.quantity_unit}'
);
});
}

1. 获取foodList数组的长度
2. map函数创建新数组
3. 映射函数中的第二个参数给出当前迭代次数
4. 我们使用三元运算符来返回条件输出