从数组 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}]

其中，我希望创建以下变量字符串作为输出：

'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() on your arr of objects. For each object you can destructure it to obtain the food_id, quantity and quantity_unit properties. Based on that, you can return a string in the format which you desired, using the index i provided in the .map() callback as the index for food in your string. Once you have obtained an array of strings, you can join each string using .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 2

您可以使用 map 函数迭代原始数组，然后使用 Object.keys 获取包含的 food-objects 的所有键并映射这些键以获取像这样的通用解决方案：

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()-方法将所有 array-members 连接为字符串，并以换行符作为分隔符。

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}'
        );
    });
}

获取 foodList 数组的长度。
map 函数创建新数组。
map 函数中的第二个参数给出当前迭代次数。
我们使用三元运算符来return条件输出。

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

Key value pair string generation out of an array React JS

reactjs

react-native

react-native-android