从JS中的对象数组创建HTML列表

Question

我正在使用SparkPost显示已发送给客户端的练习列表.目的是创建一个可以作为API发送到API的HTML字符串substitution_data.

我需要拆分的数据示例如下:

[{
    "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"
    }]
}]

我需要创建一个这样的字符串:

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

即

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

我创建了一个显示第一级(练习名称)的CodePen但是我不确定如何访问params和显示所需的结构.

Answer 1

您需要循环使用Params,然后像使用父元素一样使用map和join.

您也可以考虑使用某种模板语言来完成这类任务.因为它们更容易这样做.

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>

您可能会认为nunjucks是一种简单易用的模板语言.通常你应该将模板保存在单独的文件中并使用ajax获取它们,但为了简单起见,我将它保存在字符串中,这可能会使它更难阅读.

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>

它可能看起来比使用纯JavaScript更长,更复杂,但从长远来看,随着数据模型变得越来越复杂,它会使事情变得更容易.对于这样简单的数据来说,它更复杂,但在现实生活中,你几乎没有这么简单的数据可以展示.