将代码片段转换为HTML页面

时间：2016-04-21 05:11:54

标签： javascript html

我有这个非常棒的脚本，可以从StackExchange（JSON (from HTML Table) to CSV成员编写的Application API端点转换可怕的JSON报告。它在Run Snippet中完美运行，但我想把它放到HTML页面中。

我尝试过添加标题：

<!DOCTYPE html>
<html>
<head>
<title>Convert JSON Report to Table</title>
</head>
<body>

<script type="text/javascript">

并解决了底部的脚本，正文和html，但它没有做任何事情。

下面是我想用HTML运行的脚本。我怎么把它放到一个空白的HTML页面？谢谢，马特

var data = {
  "Header": {
    "Time": "2016-03-30T16:10:19-07:00",
    "ReportName": "GeneralLedger",
    "ReportBasis": "Accrual",
    "StartPeriod": "2016-01-01",
    "EndPeriod": "2016-03-31",
    "Currency": "GBP",
    "Option": [{
      "Name": "NoReportData",
      "Value": "false"
    }]
  },
  "Columns": {
    "Column": [{
      "ColTitle": "Date",
      "ColType": "tx_date"
    }, {
      "ColTitle": "Transaction Type",
      "ColType": "txn_type"
    }, {
      "ColTitle": "No.",
      "ColType": "doc_num"
    }, {
      "ColTitle": "Name",
      "ColType": "name"
    }, {
      "ColTitle": "Memo/Description",
      "ColType": "memo"
    }, {
      "ColTitle": "Split",
      "ColType": "split_acc"
    }, {
      "ColTitle": "Amount",
      "ColType": "subt_nat_amount"
    }, {
      "ColTitle": "Balance",
      "ColType": "rbal_nat_amount"
    }]
  },
  "Rows": {
    "Row": [{
      "Header": {
        "ColData": [{
          "value": "Current",
          "id": "144"
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }]
      },
      "Rows": {
        "Row": [{
          "ColData": [{
            "value": "2016-03-16"
          }, {
            "value": "Bill Payment (Cheque)",
            "id": "181"
          }, {
            "value": "1"
          }, {
            "value": "Teddy's T Shirt Supplier",
            "id": "70"
          }, {
            "value": "104478"
          }, {
            "value": "Creditors",
            "id": "138"
          }, {
            "value": "-600.0"
          }, {
            "value": "-600.0"
          }],
          "type": "Data"
        }, {
          "ColData": [{
            "value": "2016-03-17"
          }, {
            "value": "Bill Payment (Cheque)",
            "id": "184"
          }, {
            "value": "2"
          }, {
            "value": "Teddy's T Shirt Supplier",
            "id": "70"
          }, {
            "value": "104478"
          }, {
            "value": "Creditors",
            "id": "138"
          }, {
            "value": "-120.0"
          }, {
            "value": "-720.0"
          }],
          "type": "Data"
        }, {
          "ColData": [{
            "value": "2016-03-17"
          }, {
            "value": "Deposit",
            "id": "180"
          }, {
            "value": ""
          }, {
            "value": "",
            "id": ""
          }, {
            "value": "Opening Balance"
          }, {
            "value": "Opening Balance Equity",
            "id": "137"
          }, {
            "value": "2400.0"
          }, {
            "value": "1680.0"
          }],
          "type": "Data"
        }, {
          "ColData": [{
            "value": "2016-03-23"
          }, {
            "value": "Payment",
            "id": "186"
          }, {
            "value": "345678"
          }, {
            "value": "Maxamillion Enterprises",
            "id": "68"
          }, {
            "value": ""
          }, {
            "value": "Debtors",
            "id": "140"
          }, {
            "value": "216.0"
          }, {
            "value": "1896.0"
          }],
          "type": "Data"
        }]
      }
    }]
  }
};

function parse(data) {
  var rows = [],
    row, curRow, rowSegment;
  for (var i = 0; i < data.Rows.Row.length; ++i) {
    rowSegment = data.Rows.Row[i].Rows.Row;
    for (var j = 0; j < rowSegment.length; ++j) {
      row = [];
      curRow = rowSegment[j].ColData;
      for (var x = 0; x < curRow.length; ++x) {
        row.push(curRow[x].value);
      }
      rows.push(row);
    }
  }
  return rows;
}

var parsed = parse(data);
var rowEl, outEl = document.getElementById('html-out'),
  val;

for (var i = 0; i < parsed.length; ++i) {
  rowEl = document.createElement("div");
  rowEl.setAttribute("class", "row");
  rowEl.appendChild(document.createTextNode(parsed[i].join(', ')));
  outEl.appendChild(rowEl);
}

1 个答案:

答案 0 :(得分：0)

您错过了调用函数解析（数据）和 html-out div元素

  var data = {
    "Header": {
      "Time": "2016-03-30T16:10:19-07:00",
      "ReportName": "GeneralLedger",
      "ReportBasis": "Accrual",
      "StartPeriod": "2016-01-01",
      "EndPeriod": "2016-03-31",
      "Currency": "GBP",
      "Option": [{
        "Name": "NoReportData",
        "Value": "false"
      }]
    },
    "Columns": {
      "Column": [{
        "ColTitle": "Date",
        "ColType": "tx_date"
      }, {
        "ColTitle": "Transaction Type",
        "ColType": "txn_type"
      }, {
        "ColTitle": "No.",
        "ColType": "doc_num"
      }, {
        "ColTitle": "Name",
        "ColType": "name"
      }, {
        "ColTitle": "Memo/Description",
        "ColType": "memo"
      }, {
        "ColTitle": "Split",
        "ColType": "split_acc"
      }, {
        "ColTitle": "Amount",
        "ColType": "subt_nat_amount"
      }, {
        "ColTitle": "Balance",
        "ColType": "rbal_nat_amount"
      }]
    },
    "Rows": {
      "Row": [{
        "Header": {
          "ColData": [{
            "value": "Current",
            "id": "144"
          }, {
            "value": ""
          }, {
            "value": ""
          }, {
            "value": ""
          }, {
            "value": ""
          }, {
            "value": ""
          }, {
            "value": ""
          }, {
            "value": ""
          }]
        },
        "Rows": {
          "Row": [{
            "ColData": [{
              "value": "2016-03-16"
            }, {
              "value": "Bill Payment (Cheque)",
              "id": "181"
            }, {
              "value": "1"
            }, {
              "value": "Teddy's T Shirt Supplier",
              "id": "70"
            }, {
              "value": "104478"
            }, {
              "value": "Creditors",
              "id": "138"
            }, {
              "value": "-600.0"
            }, {
              "value": "-600.0"
            }],
            "type": "Data"
          }, {
            "ColData": [{
              "value": "2016-03-17"
            }, {
              "value": "Bill Payment (Cheque)",
              "id": "184"
            }, {
              "value": "2"
            }, {
              "value": "Teddy's T Shirt Supplier",
              "id": "70"
            }, {
              "value": "104478"
            }, {
              "value": "Creditors",
              "id": "138"
            }, {
              "value": "-120.0"
            }, {
              "value": "-720.0"
            }],
            "type": "Data"
          }, {
            "ColData": [{
              "value": "2016-03-17"
            }, {
              "value": "Deposit",
              "id": "180"
            }, {
              "value": ""
            }, {
              "value": "",
              "id": ""
            }, {
              "value": "Opening Balance"
            }, {
              "value": "Opening Balance Equity",
              "id": "137"
            }, {
              "value": "2400.0"
            }, {
              "value": "1680.0"
            }],
            "type": "Data"
          }, {
            "ColData": [{
              "value": "2016-03-23"
            }, {
              "value": "Payment",
              "id": "186"
            }, {
              "value": "345678"
            }, {
              "value": "Maxamillion Enterprises",
              "id": "68"
            }, {
              "value": ""
            }, {
              "value": "Debtors",
              "id": "140"
            }, {
              "value": "216.0"
            }, {
              "value": "1896.0"
            }],
            "type": "Data"
          }]
        }
      }]
    }
  };

  function parse(data) {
    var rows = [],
      row, curRow, rowSegment;
    for (var i = 0; i < data.Rows.Row.length; ++i) {
      rowSegment = data.Rows.Row[i].Rows.Row;
      for (var j = 0; j < rowSegment.length; ++j) {
        row = [];
        curRow = rowSegment[j].ColData;
        for (var x = 0; x < curRow.length; ++x) {
          row.push(curRow[x].value);
        }
        rows.push(row);
      }
    }
    return rows;
  }
  var parsed = parse(data);
  var rowEl, outEl = document.getElementById('html-out'),
    val;
  for (var i = 0; i < parsed.length; ++i) {
    rowEl = document.createElement("div");
    rowEl.setAttribute("class", "row");
    rowEl.appendChild(document.createTextNode(parsed[i].join(', ')));
    outEl.appendChild(rowEl);
  }

  parse(data);
<div id="html-out">

</div>

相关问题
最新问题