Turning Code Snippet into an HTML page

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

Please show the entire HTML page you have. It'd also help if you looked at the [JavaScript console](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers) and told if you see any error messages there. — JJJ, Apr 21 '16 at 05:16

score 0 · Accepted Answer · answered Apr 21 '16 at 05:43

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>

perfect, thanks - couldn't work out why it wasn't working - awesome :) — Matt Lightbourn, Apr 21 '16 at 20:45

Turning Code Snippet into an HTML page

1 Answers1