Display JSON results to HTML Table-CodePudding

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 >
        <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>

            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"
        },

CodePudding user response：

Get rid of the '#' in getElementById()

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

CodePudding user response：

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.

CodePudding user response：

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.

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  id="table">
            <thead>
                <tr >
                    <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>

CodePudding user response：

Try following <tr></tr> missing

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

this might work