Key value pair string generation out of an array React JS - reactjs

Question

I have following array (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}]
Out of which, I wish to create following variable String as an 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'
I wanted to try something like following:
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);
}
Need to improve above code syntatically so that above output is received.

Answer 1

You can use the map function to iterate over your original array, then use Object.keys to get all keys of the contained food-objects and map over those keys as well to get a generic solution like this:
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);
The join()-Method joins all array-members as string with linebreaks as separators.

Answer 2

You can use .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').
See example below:
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

try this:
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}'
);
});
}
get length of foodList array.
map function creates new array.
second parameter in map function gives current iteration number.
we use ternary operator to return conditional output.