Html Question posted in
Some basic documentation can be found here.

Html – why json file value is not displayed (javascript)

  <script>
        // Fetch JSON data
        fetch('dat.json')
               .then(response => response.json())
            .then(data => {
                const tbody = document.querySelector('#dataTable tbody');
                data.forEach(item => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.city}</td>
                    `;
                      tbody.appendChild(row);
                });
            })
                .catch(error =>console.error('Error fetching the data:', error));
    </script>

why json file value is not displayed the code i took from chatgpt i tried vscode and notepad +++ too none of them work.

Tags:

2

Answers


  1. 0

    First, check the location of the JSON file.

    If dat.json is in the same folder as the HTML file, the fetch path should be ‘./dat.json’.
    If it’s in a subfolder, the path should reflect that, e.g., ‘./data/dat.json’.

    Login or Signup to reply.
  2. 0

    The return value may not be suitable for an array method. forEach is an array method, if there is no suitable structure for it, it will not be displayed in the interface as it will return an error. details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

    For example, when I request https://jsonplaceholder.typicode.com/todos/1 point, I cannot use the array method for this response. But when I get the https://jsonplaceholder.typicode.com/todos/ items, I can now use the array methods.

    enter image description here

    First, check the return values ​​from the ‘dat.json’ request from the http requests. Then you can convert the values ​​from the request into a suitable structure for the array.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search