0

I have the following JSON array

var json = [
 {  
    'albumTitle':'Title',
    'leader':'Leader',
    'trackList':'track1;track2;track3;track4'
 },
etc...
}]

I'm iterating through the array and displaying on page with a standard for loop.

for (var i = 0; i < json.length; i++) {
    $("#albums").append(`
     <div>
         <p>`+json[i].albumTitle+` by ` +json[I].leader+`</p>

         <h1>Track List</h1>
         <p>`+json[i].trackList+`</p>
     </div>
     `);

How can I display json[i].trackList as separate list items? Like:

<ol>
    <li>Track 1</li>
    <li>Track 2</li>
    <li>Track 3</li>
</ol>

Thanks for any help.

Barmar
  • 741,623
  • 53
  • 500
  • 612
SAA
  • 37
  • 1
  • 7
  • I think you would want a nested loop that looks similar to the one you have. – SynchroDynamic Aug 26 '19 at 21:07
  • 1
    If you do `json[i].trackList.split(/;/i)`, it will create an array. You can loop through that array to seperate each track into a `li` tag. – David Grace Aug 26 '19 at 21:07
  • But that doesn't *solve* the OP's problem, does it @MarcoBonelli? – Jack Bashford Aug 26 '19 at 21:15
  • $(function(){ var json = [ { 'albumTitle':'Title', 'leader':'Leader', 'trackList':'track1;track2;track3;track4' } ]; for (var i = 0; i < json.length; i++) { var tracks = json[i].trackList.split(';'); var res = tracks.map(a => `
  • ${a}<\/li>`).join(''); console.log(res); $("#albums").append(`

    `+json[i].albumTitle+` by ` +json[i].leader+`

    Track List

      ${res}
    `); } });
    • – Vishnu Aug 26 '19 at 21:31