asked on

parse JSON file to create Table on HTML page using Jquery

I would like to parse a JSON file that is stored in the same place as my webpage and create an HTML table dynamically using some type of jquery,

I have not been able to get this to work successfully.

This is what the JSON data looks like:

[{"WWID":"1000000290","FULL_NAME":"JAIPRAKASH GABA","Rule Type":null,"Learner Region":null,"MappingIDs":null,"HCCO Name":"zz-Not Mapped","HCCO WWID":null,"WORK_REGION":"NORTH AMERICA","MRC_CODE":"001270","LEGAL_ENTITY_CODE":"006084","Leader WWID":null,"Leader Name":null,"Audience":null}
,{"WWID":"1000000354","FULL_NAME":"MARK KOMEN","Rule Type":null,"Learner Region":null,"MappingIDs":null,"HCCO Name":"zz-Not Mapped","HCCO WWID":null,"WORK_REGION":"NORTH AMERICA","MRC_CODE":"001410","LEGAL_ENTITY_CODE":"006090","Leader WWID":null,"Leader Name":null,"Audience":null}
,{"WWID":"1000000419","FULL_NAME":"ALEXIS BAKER","Rule Type":null,"Learner Region":null,"MappingIDs":null,"HCCO Name":"zz-Not Mapped","HCCO WWID":null,"WORK_REGION":null,"MRC_CODE":null,"LEGAL_ENTITY_CODE":null,"Leader WWID":null,"Leader Name":null,"Audience":null}
,{"WWID":"1000000420","FULL_NAME":"MARGARIDA CALDEIRA","Rule Type":null,"Learner Region":null,"MappingIDs":null,"HCCO Name":"zz-Not Mapped","HCCO WWID":null,"WORK_REGION":null,"MRC_CODE":null,"LEGAL_ENTITY_CODE":null,"Leader WWID":null,"Leader Name":null,"Audience":null}

Open in new window

I would like to create a table that includes all of the filed names: WWID, FULL_NAME, etc and the values

Any help would be greatly appreciated.

leakim971

test page : https://jsfiddle.net/2jck0mob/

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            var data = [{"WWID":"1000000290","FULL_NAME":"JAIPRAKASH GABA","Rule Type":null,"Learner Region":null,"MappingIDs":null,"HCCO Name":"zz-Not Mapped","HCCO WWID":null,"WORK_REGION":"NORTH AMERICA","MRC_CODE":"001270","LEGAL_ENTITY_CODE":"006084","Leader WWID":null,"Leader Name":null,"Audience":null}
                ,{"WWID":"1000000354","FULL_NAME":"MARK KOMEN","Rule Type":null,"Learner Region":null,"MappingIDs":null,"HCCO Name":"zz-Not Mapped","HCCO WWID":null,"WORK_REGION":"NORTH AMERICA","MRC_CODE":"001410","LEGAL_ENTITY_CODE":"006090","Leader WWID":null,"Leader Name":null,"Audience":null}
                ,{"WWID":"1000000419","FULL_NAME":"ALEXIS BAKER","Rule Type":null,"Learner Region":null,"MappingIDs":null,"HCCO Name":"zz-Not Mapped","HCCO WWID":null,"WORK_REGION":null,"MRC_CODE":null,"LEGAL_ENTITY_CODE":null,"Leader WWID":null,"Leader Name":null,"Audience":null}
                ,{"WWID":"1000000420","FULL_NAME":"MARGARIDA CALDEIRA","Rule Type":null,"Learner Region":null,"MappingIDs":null,"HCCO Name":"zz-Not Mapped","HCCO WWID":null,"WORK_REGION":null,"MRC_CODE":null,"LEGAL_ENTITY_CODE":null,"Leader WWID":null,"Leader Name":null,"Audience":null}];
            $('#datatable').DataTable({
                "data": data,
                "columns": [
                    { "data": "WWID" },
                    { "data": "FULL_NAME" },
                    { "data": "Rule Type" },
                    { "data": "Learner Region" },
                    { "data": "MappingIDs" },
                    { "data": "HCCO Name" },
                    { "data": "HCCO WWID" },
                    { "data": "WORK_REGION" },
                    { "data": "MRC_CODE" },
                    { "data": "LEGAL_ENTITY_CODE" },
                    { "data": "Leader WWID" },
                    { "data": "Leader Name" },
                    { "data": "Audience" }

                ]
            });
        });
    </script>
</head>
<body>
<table id="datatable">
    <thead>
    <tr>
        <th>WWID</th>
        <th>FULL_NAME</th>
        <th>Rule Type</th>
        <th>Learner Region</th>
        <th>MappingIDs</th>
        <th>HCCO Name</th>
        <th>HCCO WWID</th>
        <th>WORK_REGION</th>
        <th>NORTH AMERICA</th>
        <th>MRC_CODE</th>
        <th>LEGAL_ENTITY_CODE</th>
        <th>Leader WWID</th>
        <th>Leader Name</th>
        <th>Audience</th>
    </tr>
    </thead>
</table>
</body>
</html>

Open in new window

Adam Ehrenworth

ASKER

First and foremost- thank you ---

What if the "data" is not able to be put directly into the HTML? it has thousands of lines but it is sitting in the same folder as this webpage.

can I reference the direct URL of the JSON file somehow to parse that?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial