I have an array of objects but the number of objects varies, so I am using a for loop to create li
tags:
let scaleDeg = []
for (let i = 0; i < result[0]["scales"].length; i++) {
scaleDeg.push(`<li>` + Object.keys(result[0].scales[i]) + ": " + Object.values(result[0].scales[i]) + `</li>`)
}
Above that loop I set a variable scaleDegrees
to an empty string and then I:
scaleDegrees = scaleDeg
document.getElementById('scale-degrees').innerHTML = scaleDegrees;
For some reason, I am getting a comma as a block element in between each list item, but NOT after the last one. It looks similar to the array of objects:
{
"Chord": "maj",
"Intervals": ["1", "3", "5"],
"steps": [0, 4, 7],
"Tendency": ["I", "IV"],
"scales": [
{ "Major Scale": ["1st", " 4th", " 5th"] },
{ "Minor Pentatonic": ["2nd"] },
{ "Blues Scale": ["2nd"] },
{ "Harmonic Minor": ["5th", "6th"] },
{ "Melodic Minor": ["4th", "5th"] },
{ "Augmented": ["1st", "3rd", "5th"] },
{ "HW Diminished": ["1st", "3rd", "5th", "7th"] },
{ "Major Bebop": ["1st", "4th", "5th"] },
{ "Minor Bebop": ["3rd", "5th", "8th"] }
]
},
Does anyone know why I would be getting this comma in my HTML, or more importantly, what can I do to get rid of it? Here are 2 screenshots. The first one is the console:
.
Here is the page: