Question

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

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

[{
    "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。

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

＆＃13;

$(document).ready(function() {

"use strict";

    $("#submit").click( function(e) {
    e.preventDefault();

      if( $("#username").val() === "" || $("#password").val() === "" )
       { 
        $("div#error").html("Both username and password are required");
       } else {
                $.post( $("#myForm").attr("action"),
                        $("#myForm :input").serializeArray(),
                        function(data) {
                          $("div#error").html(data);
                        });

                $("#myForm").submit( function() {
                   return false;
                });
               }
});

});

＆＃13;

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(', ');
}

＆＃13;

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

＆＃13;

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

＆＃13;

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});

＆＃13;

它似乎比使用纯JavaScript更长，更复杂的解决方案，但从长远来看，随着您的数据模型变得越来越复杂，它会使事情变得更容易。对于这样简单的数据而言，它更复杂，但在现实生活中，你几乎没有这么简单的数据可以显示。

Answer 2

您只需要两个嵌套循环：

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>';

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

2 个答案: