Create HTML list from array of Objects in JS

Question

I am using SparkPost to display a list of exercises that have been sent to a client. The aim is to create a HTML string that can be sent to the API as substitution_data.

An example of the data I need to split down is:

[{
    "exerciseName": "4 Point Kneeling Lumbar",
    "Params": [{
        "param": "Sets",
        "childParam": "1"
    }, {
        "param": "Reps",
        "childParam": "1"
    }]
}, {
    "exerciseName": "Side Flexion",
    "Params": [{
        "param": "Sets",
        "childParam": "1"
    }, {
        "param": "Reps",
        "childParam": "1"
    }]
}]

I need to create a string like this:

<ul>
  <li>4 Point Kneeling Lumbar, Sets: 1, Reps: 10</li>
  <li>Side Flexion, Sets: 1, Reps: 12</li>
</ul>

i.e

var subData = '<ul><li>4 Point Kneeling Lumbar, Sets: 1, Reps: 10</li><li>Side Flexion, Sets: 1, Reps: 12</li></ul>';

I have created a CodePen that shows the first level (exercise Name) however I am unsure how to access the params and display in the desired structure.

sielakos · Accepted Answer · 2016-05-22 07:58:41Z

You need to loop over Params and then use map and join as you did with parent elements.

You might also consider using some template language for that kind of tasks. As it is easier to do so with them.

var list = [{
    "exerciseName": "4 Point Kneeling Lumbar",
    "Params": [{
        "param": "Sets",
        "childParam": "1"
    }, {
        "param": "Reps",
        "childParam": "1"
    }]
}, {
    "exerciseName": "Side Flexion",
    "Params": [{
        "param": "Sets",
        "childParam": "1"
    }, {
        "param": "Reps",
        "childParam": "1"
    }]
}];

var html = list.map(function (element) {
  return '<li>' + element.exerciseName + ', ' +
    formatParams(element.Params) + '</li>';  
}).join('');

document.getElementById('target').innerHTML = html;


function formatParams(params) {
  return params.map(function (param) {
    return param.param + ':' + param.childParam;
  }).join(', ');
}

<div id="target"></div>

You might consider nunjucks as simple and easy to use template language. Generally you should keep template in separate files and fetch them with ajax, but for simplicity I keep it in string and that might make it a bit harder to read.

var list = [{
    "exerciseName": "4 Point Kneeling Lumbar",
    "Params": [{
        "param": "Sets",
        "childParam": "1"
    }, {
        "param": "Reps",
        "childParam": "1"
    }]
}, {
    "exerciseName": "Side Flexion",
    "Params": [{
        "param": "Sets",
        "childParam": "1"
    }, {
        "param": "Reps",
        "childParam": "1"
    }]
}];

var template = '<ul>{% for item in list %} ' +
    '<li>{{ item.exerciseName }}, ' +
    '{% for param in item.Params %}' +
    '  {{param.param}}: {{param.childParam}} {% if not loop.last %} , {% endif %}'+
    '{%endfor%} '+
    '</li>{%endfor%}</ul>';

document.body.innerHTML = nunjucks.renderString(template, { list: list});

<script src="https://cdnjs.cloudflare.com/ajax/libs/nunjucks/2.4.2/nunjucks.js"></script>

It might seems as longer and more complicated solution than using pure JavaScript, but in long run as your data model get more and more complicated it would make things easier. Ofc for such simple data it more complicated, but in real life you hardly ever have such simple data to display.

Thanks, i'm not displaying this on the frontend I need to send the string as HTML to the SparkPost API. Great work BTW!

blex · Accepted Answer · 2016-05-22 07:34:41Z

4

You just need two nested loops:

var list = [{
  "exerciseName": "4 Point Kneeling Lumbar",
  "Params": [{
    "param": "Sets",
    "childParam": "1"
  }, {
    "param": "Reps",
    "childParam": "1"
  }]
}, {
  "exerciseName": "Side Flexion",
  "Params": [{
    "param": "Sets",
    "childParam": "1"
  }, {
    "param": "Reps",
    "childParam": "1"
  }]
}];

var html = '';

for (var i = 0, l = list.length; i < l; i++) {
  html += '<li>' + list[i].exerciseName;
  for (var j = 0, k = list[i].Params.length; j < k; j++) {
    html += ', ' + list[i].Params[j].param + ': ' + list[i].Params[j].childParam
  }
  html += '</li>';
}

document.body.innerHTML = '<ul>' + html + '</ul>';

answered May 22, 2016 at 7:34

blex

25.7k6 gold badges48 silver badges78 bronze badges

2 Comments

Taylorsuk Over a year ago

Thanks for taking the time to answer. I prefer to pass this through a function to keep my code a bit simpler.

blex Over a year ago

@Taylorsuk No problem, choose the answer that best suits your needs ;)

Collectives™ on Stack Overflow

Create HTML list from array of Objects in JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related