[英]Display array data only one time
I have an array which looks like below -我有一个如下所示的数组 -
const arr = [{name: 'ST', value: 1}, {value: 0}, {name: 'ST', value: 2}]
I'm looping over above arr
with the map
function and able to display the value.我正在使用map
function 遍历arr
并能够显示该值。
But the problem is I want to display name only single time.但问题是我只想一次显示名称。 For eg ST: 3
.例如ST: 3
。
So ST
will display single time and we will do the addition of all the value.所以ST
将显示单个时间,我们将添加所有值。 Also I dont know the index of name at which index it is available.另外我不知道它在哪个索引处可用的名称索引。
Is there any other alternative for this rather doing hardcode name
.有没有其他替代方法可以代替硬编码name
。
Thanks in advance.提前致谢。
map
returns an array and not suitable in your use case. map
返回一个数组,不适合您的用例。 You can use forEach
, reduce
or normal for-loop
.您可以使用forEach
、 reduce
或普通for-loop
。 The below code achieves the result using reduce
.下面的代码使用reduce
实现了结果。 Inside callback function sum all the values.内部回调 function 对所有值求和。
const arr = [{ name: 'ST', value: 1 }, { name: 'ST', value: 0 }, { name: 'ST', value: 2 }].reduce((acc, curr) => { if (.acc[curr.name]) { acc[curr.name] = curr;value. } else { acc[curr.name] += curr;value } return acc, }; {}). console.log(arr)
You can easily achive this using reduce您可以使用reduce轻松实现此目的
const arr = [{ name: "ST", value: 1 }, { value: 0 }, { name: "ST", value: 2 }]; const result = arr.reduce((acc, curr) => { const { name, value } = curr; const tempSearchObj = acc.find((o) => o.name === name); if (tempSearchObj) { tempSearchObj.value = value + tempSearchObj.value; } else { if (name) acc = [...acc, { name, value }]; else acc = [...acc, { value }]; } return acc; }, []); console.log(result);
First of all when you use Array.map
the length of the output array
will be same as the length of the input array
.首先,当您使用Array.map
时, output array
的长度将与input array
的长度相同。 So, that is not the desired method that you want.因此,这不是您想要的方法。
There are multiple ways in achieving the desired output.有多种方法可以实现所需的 output。 As you want to display the sum of all the values
where you've the same name
then Array.reduce
will come to the rescue.当您想要显示您具有相同name
的所有values
的总和时, Array.reduce
将来救援。
const arr = [{name: 'ST', value: 1}, {value: 0}, {name: 'ST', value: 2}] const formatArr = arr => { return Object.values(arr.reduce((res, obj) => { //Check if the object is already present in the accumulator ie, res //If so, add he current obj.value to the existing value if(res[obj.name]) { res[obj.name].value += obj.value; } else { //else create a new object and add it the accumulator res[obj.name] = {...obj} } return res; }, {})); } //Get the formatted array with cumulative values based on name const formattedOutput = formatArr(arr); //Use loop to print values. //If you are using react you can use `map` to display in the UI. //For simplicity here i'm using `forEach` to display in the console. formattedOutput.forEach(obj => { console.log(`${obj.name || "Name"}: ${obj.value}`); })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.