Question

Make sure it works on jsfiddle

and keep the code seperate

html:

css:

javascript:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Assignment

You should already have some experience with jQuery and some simple experience with JSON (from charting). In this assignment we will be creating some JSON data, parsing it, and displaying it.

Step 1 – If you are not familiar with JSON you should complete the JSON tutorial at w3schools

Step 2- You will now create a JSON file to represent some data of your own making some examples of data that you could create such as A sports score database ex. players, playerName, season, and scoring. Feel free to create data on something that is of interest to you (and share on the discussion board).

Step 3 – Validate your JSON (you can use JSON Lint) jsonlint.c o m  and save it to your server as a text file.

Step 4 – In a web page, read the JSON data and display the data in a nice human readable format (table or list). This is demonstrated in the W3Schools tutorial.

Information

Answer 1

Here's the json data used in the solution. You can validate it on jsonlint.com if you want.

{
        "status": "success",
        "data": [{
                "id": "1",
                "employee_name": "Tiger Nixon",
                "employee_salary": "320800",
                "employee_age": "61"
        }, {
                "id": "2",
                "employee_name": "Garrett Winters",
                "employee_salary": "170750",
                "employee_age": "63"
        }, {
                "id": "3",
                "employee_name": "Ashton Cox",
                "employee_salary": "86000",
                "employee_age": "66"
        }, {
                "id": "4",
                "employee_name": "Cedric Kelly",
                "employee_salary": "433060",
                "employee_age": "22"
        }, {
                "id": "5",
                "employee_name": "Airi Satou",
                "employee_salary": "162700",
                "employee_age": "33"
        }]
}

Since only html, css and javascript files are asked in the question and it needs to work on jsfiddle, I'm just going to use this json data as it is in the code, instead of requesting it from a server. A server can also be written to send the json file and the code will work just fine. You can also parse the JSON data stored as a string using JSON.parse() method in JavaScript. For example,

const data = JSON.parse('{"status":"success","data":[{"id":"1","employee_name":"Tiger Nixon","employee_salary":"320800","employee_age":"61"},{"id":"2","employee_name":"Garrett Winters","employee_salary":"170750","employee_age":"63"},{"id":"3","employee_name":"Ashton Cox","employee_salary":"86000","employee_age":"66"},{"id":"4","employee_name":"Cedric Kelly","employee_salary":"433060","employee_age":"22"},{"id":"5","employee_name":"Airi Satou","employee_salary":"162700","employee_age":"33"}]}')
console.log(data);

Working jsfiddle: https://jsfiddle.net/helek91076/yg91nk35/3/

JavaScript

/* jsonData can be requested from a server as well. */
const jsonData = JSON.parse('{"status":"success","data":[{"id":"1","employee_name":"Tiger Nixon","employee_salary":"320800","employee_age":"61"},{"id":"2","employee_name":"Garrett Winters","employee_salary":"170750","employee_age":"63"},{"id":"3","employee_name":"Ashton Cox","employee_salary":"86000","employee_age":"66"},{"id":"4","employee_name":"Cedric Kelly","employee_salary":"433060","employee_age":"22"},{"id":"5","employee_name":"Airi Satou","employee_salary":"162700","employee_age":"33"}]}')

const tableRef = document.getElementsByClassName('jsonTable')[0].getElementsByTagName('tbody')[0];

jsonData.data.forEach(row => {
        // Add new row
  const newRow   = tableRef.insertRow();
  // Insert cells
  const id  = newRow.insertCell(0);
  id.appendChild(document.createTextNode(row.id));
  const name  = newRow.insertCell(1);
  name.appendChild(document.createTextNode(row.employee_name));
  const salary  = newRow.insertCell(2);
  salary.appendChild(document.createTextNode(row.employee_salary));
  const age  = newRow.insertCell(3);
  age.appendChild(document.createTextNode(row.employee_age));
})

HTML

<table class="jsonTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Salary</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

CSS

.jsonTable {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
}
.jsonTable thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.jsonTable tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}