stackoom
  简体   繁体   中英

Turning Code Snippet into an HTML page

 原文  2016-04-21 05:11:53  8   1    javascript/ html

Question

I have this awesome script which converts a horrible JSON Report from an Application API endpoint which was written by a member of StackExchange ( JSON (from HTML Table) to CSV ). It runs perfectly in the Run Snippet but, I want to put this into an HTML page instead.

I have tried adding a header: 

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

<script type="text/javascript">

and resolved the scripts, body and html at the bottom but it doesn't do anything.

Below is the script I want to run in HTML. How would I put this into a blank HTML page? Thanks, Matt 

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 answers

solution1
 0 ACCPTED  2016-04-21 05:43:44

You missed to call the function parse( data ) and html-out div element 

  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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Html code block for html snippet? Adding an html code snippet to javascript? rendering xml and html tags in a code snippet HTML Turning this JS Code for Text Animation from “on click” to automatic when HTML page loads? How to redirect to a html page from a javascript snippet? Code snippet works but not in my html file Can I scrapping an HTML code snippet on browser jQuery code snippet not working on page load show html tags in html content, show html code snippet in html How to display HTML/Javascript snippet on HTML page (plaintext) using python?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM