Display JSON results to HTML Table

Question

I'm trying to output the results of a JSON file in a table. I'm able to see the data and loop thru each data but I'm unable to display that in the table.

When troubleshooting I get, "script.js:25 Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')
at outData (script.js:25:34)
at script.js:6:17"

I've looked online and I'm unable to find the solution to this. Any help is greatly appreciated.

HTML

<body>
    <div class="stats">
        <table>
            <thead>
                <tr>
                    <th>POS</th>
                    <th>Name</th>
                    <th>APP</th>
                    <th>Goals</th>
                    <th>Assists</th>
                    <th>Clean Sheets</th>
                </tr>
            </thead>    
            <tbody id="stats-output">
            </tbody>
        </table>
    </div>
<script src="script.js"></script>
</body>

JS

            fetch("data.json")
            .then(Response => Response.json())
            .then(data => {
                outData(data.Sheet1);
            })
            function outData(val){
                console.log(val);
                let output = document.getElementById("#stats-output");
                let html = '';

                val.forEach((player, index) =>{
                    console.log(player);
                    html += `
                        <td>${player.Position}</td>
                        <td>${player.Name}</td>
                        <td>${player.Apperiences}</td>
                        <td>${player.Assists}</td>
                        <td>${player.Clean_Sheets}</td>
                    `;

                })
                output.innerHTML = html;
            }

data example

        {
            "Position": "ST",
            "Name": "Ronaldo",
            "Apperiences": "50",
            "Assists": "11",
            "Clean_Sheets": "10"
        },

Your output element variable is null. This is probably because you have a number sign (#) in the id let output = document.getElementById("#stats-output");. Take that out and it should work. If you are using document.querySelector() then you would include the number sign. — EssXTee
– EssXTee, Commented Aug 8, 2022 at 17:42

Kpro · Accepted Answer · 2022-08-08 17:46:24Z

3

Get rid of the '#' in getElementById()

let output = document.getElementById("stats-output");

answered Aug 8, 2022 at 17:46

Kpro

713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andres Alvarez · Accepted Answer · 2022-08-08 18:05:16Z

I think one thing you're missing is to parse the JSON data so it's properly readable and iterable in javascript. Use JSON.parse(json data you pulled).

Here is the code bit I think will demonstrate:

var data = `[{
        "Position": "ST",
        "Name": "Ronaldo",
        "Apperiences": "50",
        "Assists": "11",
        "Clean_Sheets": "10"
    }, {
        "Position": "ST",
        "Name": "Messi",
        "Apperiences": "50",
        "Assists": "11",
        "Clean_Sheets": "10"
    }, {
        "Position": "ST",
        "Name": "Pele",
        "Apperiences": "50",
        "Assists": "11",
        "Clean_Sheets": "10"
    }]`;

var parsed_data = JSON.parse(data)
console.log(parsed_data)


parsed_data.forEach( json_data_set =>{
  var tr = document.createElement("tr")
  Object.keys(json_data_set).forEach( key =>{
    
    var td = document.createElement("td")
    td.innerText = json_data_set[key] 
    tr.appendChild(td)
  })
 
document.querySelector("tbody").appendChild(tr)
  
})

Hope this helps.

Sayajin Rose · Accepted Answer · 2022-08-08 19:29:21Z

I'm not sure what the issue was, I tried the different answers suggested but none of them worked. I used axios and jquery and was able to resolve the issue.

JS

axios.get('data.json') 
.then((response) => {
    console.log(response);
    let players = response.data.Sheet1;
    let output = '';
    $.each(players, (index, player) => {
        output += `
        <tr>
        <td>${player.Position}</td>
        <td>${player.Name}</td>
        <td>${player.Apperiences}</td>
        <td>${player.Assists}</td>
        <td>${player.Clean_Sheets}</td>
        </tr>
        `;
    });

    $('#stats').html(output);
})

HTML

      <table class="table table-striped" id="table">
            <thead>
                <tr class="bg-info">
                    <th>POS</th>
                    <th>Name</th>
                    <th onclick="">APP</th>
                    <th onclick="">Assists</th>
                    <th onclick="">Clean Sheets</th>
                </tr>
            </thead>    
            <tbody id="stats">
            </tbody>
        </table>

Collectives™ on Stack Overflow

Display JSON results to HTML Table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related