Question

我有一个Django视图，它将根据给出的内容返回JSON数据。每个JSON元素将具有相同的字段，但返回的JSON数组将具有动态数量的元素。

以下是可能返回的可能JSON数据的示例：

[
   {
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
   }
]

以下是包含多个元素的示例或JSON返回：

[
   {
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
   },
   {
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
    }
]

使用JavaScript，我想将其转换为类似于以下的HTML并将其分配给变量。

Open Job Lines: 0 <br>
Open Hours: 0 <br>
Repair Order: 123454 <br>
Expected Pay: 1.9 <br>
Actual Pay: 1.0 <br>
Pay Status: Underpaid <br>

Open Job Lines: 0, <br>
Open Hours: 0 <br>
Repair Order: 123454 <br>
Expected Pay: 1.9 <br>
Actual Pay: 1.0 <br>
Pay Status": Underpaid <br>

Answer 1

这是你需要的吗？

因为你的问题不是很清楚。

＆＃13;

$(document).ready(function() {

  // Let's assume your data was already returned from the AJAX call...
  var data = [{
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
  }, {
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
  }];

  displayHTML(data, $('#output'));

});

/**
 * Used to build and display the HTML from a specific set of data.
 * @param {Object[]} - An array of objects containing the data to be processed.
 * @param {Object} - A jQuery object with the element where the HTML will be displayed.
 */
function displayHTML(data, outputEl) {
  $.each(data, function(index, record) {
    for (var property in record) {
      if (record.hasOwnProperty(property)) {
        outputEl.append('<b>' + property + '</b>: ' + record[property] + '<br>');
      }
    }
    outputEl.append('<br>');
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

＆＃13;

将动态JSON数组转换为HTML

1 个答案:

这是你需要的吗？