如何在Javascript中同时访问具有变化值的对象数组中的所有元素？

Question

My program is constantly collecting data into an array of five objects with two values each: "label" which is a string and "confidence" which is a float:

[{"label": vocals, "confidence": 0.98373},{"label": snare, "confidence": 0.32738}...]

This is how teachable machine audio model stores the data.

I'm trying to change the height of 5 rectangles with the same label names according to the confidence value of each item in the array but I'm having a hard time trying to read and display this data simultaneously, as the order of each label and it's confidence value will change every second or so.

The program is supposed to be an audio visualizer that is supposed to display the loudness(confidence value) of each instrument at the same time. I can only think of iterative implementations that would only display one value at a time.

Answer 1

1. Map the data into an object

 const values = [{ "label": 'vocals', "confidence": 0.98373 }, { "label": 'snare', "confidence": 0.32738 }] const object = values.reduce((obj, val) => ({ ...obj, [val.label]: val.confidence }), {}) console.log(object)

2. Sort values by label and use indexes for values.

 const values = [{ "label": 'vocals', "confidence": 0.98373 }, { "label": 'snare', "confidence": 0.32738 }].sort((a, b) => a.label.localeCompare(b.label)) console.log(values)

3. Use .find to find the value you are interested in

 const values = [{"label": 'vocals', "confidence": 0.98373},{"label": 'snare', "confidence": 0.32738}] const vocals = values.find(val => val.label === 'vocals') console.log(vocals)