将代码段转换为HTML页面

马特·莱特本

我有一个很棒的脚本,它可以将来自ApplicationExchange端点的可怕的JSON报告转换为由StackExchange的成员编写的(JSON(来自HTML表)为CSV)。它可以在“运行代码段”中完美运行,但是我想将其放入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);
}
扎因·扎法尔(Zain Zafar)

您错过了调用函数parse(datahtml-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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将代码段转换为HTML页面

来自分类Dev

如何将一段HTML代码转换为PDF文件?

来自分类Dev

VBA:将代码段从VBA转换为SQL

来自分类Dev

将一段JavaScript代码转换为php

来自分类Dev

从JavaScript将HTML页面转换为PDF

来自分类Dev

将html页面转换为jsp

来自分类Dev

PHP将'转换为HTML代码

来自分类Dev

页面文本:禁止将 HTML 链接转换为 HTML 实体

来自分类Dev

将代码从我的.aspx页面转换为C#.cs页面中的代码

来自分类Dev

如何使用Django将HTML页面转换为PDF

来自分类Dev

如何将Vue JS HTML页面转换为PDF

来自分类Dev

如何将多个HTML页面URL转换为PHP

来自分类Dev

使用pdfbox库将pdf转换为html页面

来自分类Dev

使用php将html页面转换为pdf

来自分类Dev

将动态 HTML 页面转换为 React/JSX

来自分类Dev

将原生JS Ajax代码段转换为JQuery替代方法?

来自分类Dev

如何将一段CSS代码转换为LESS CSS

来自分类Dev

将代码段转换为另一种语言是不必要的= op?

来自分类Dev

Golang的新手-对指针感到困惑,请帮助将c ++代码段转换为go

来自分类Dev

将代码段转换为另一种语言是不必要的= op?

来自分类Dev

如何将一段CSS代码转换为LESS CSS

来自分类Dev

使用Phantom.js将HTML代码转换为PNG

来自分类Dev

将HTML代码转换为字符串.net

来自分类Dev

将HTML代码转换为laravel(或任何框架)

来自分类Dev

使用PHP和PHPWord将HTML代码转换为doc

来自分类Dev

将öéü等字符转换为PHP或javascript中的HTML代码

来自分类Dev

如何将HTML代码转换为JSON对象?

来自分类Dev

将HTML代码转换为laravel(或任何框架)

来自分类Dev

如何将HTML代码转换为Javascript?