How to simultaneously access all elements in an array of objects with changing values in 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.

score 0 · Answer 1 · answered Jul 06 '22 at 18:33

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)

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)

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)

How to simultaneously access all elements in an array of objects with changing values in Javascript?

1 Answers1