CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapfetch
user10727653
user10727653

Reputation:

fetch json to table (endpoint)

i'm beginner on javascript trying to learn everyday, here i'm trying to fetch json data from url with endpoints, for some reason data is not coming to 'table' i can see it in console.log but not on table. my json data looks like this : 

{
  "id": "145127236",
  "mygoals": "success",
  "future": "high",
  "dole": {
    "Key": "fhd699f"
  }
}

and my code like this : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <style>
    </style>
	
</head>
<body>

<div class="container">
    <table class="table table-stripped"> 
	    <thead>
		   <tr> 
		       <th> emp id</th>
			   <th> emp mygoals</th>
 		       <th> emp future</th>

		   </tr> 
		</thead>
	
	
      <tbody id="data" >
 </tbody>
  </table
</div>


    <script>
  fetch("https://sp*****.com/get/henkilot/98765432/sijoitus",
              {
              method: "GET",
              headers: {
                 "x-api-key": "p*****w"
              }
            }
          ).then(res =>{ 

        res.json().then(
		data=> {
		console.log(data);
		if(data.length > 0){
		var temp ="";
		
		data.forEach((u) =>{
		      temp +="<tr>";
			  temp += "<td>"+u.id+"</td>";
			  temp += "<td>"+u.mygoals+"</td>";
			  temp += "<td>"+u.future+"</td></tr>";

		})
		       document.getElementById("data").innerHTML = temp
		}
		}
	  )
    }
  )
 .catch(err => {
          console.log("ERROR: " + err);
        });
    </script>

</body>
</html>

Upvotes: 1

Views: 116

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22431

Your braces are insane
try that:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <table class="table table-stripped"> 
      <thead>
        <tr> 
          <th> emp id </th>
          <th> emp mygoals </th>
          <th> emp future </th>
        </tr> 
      </thead>
      <tbody id="data"></tbody>
    </table>
  </div>

<script>
  const tableData = document.getElementById("data")
    ;
  fetch("https://sp*****.com/get/henkilot/98765432/sijoitus",
    { method: "GET"
    , headers: { "x-api-key": "p*****w" }
    })
  .then(res=>res.json())
  .then(data=>
    {
    console.log(data)
    data.forEach(u=>
      {
      let newRow = tableData.insertRow()
      newRow.insertCell().textContent = u.id
      newRow.insertCell().textContent = u.mygoals
      newRow.insertCell().textContent = u.future
      })
    })
  .catch(err => console.log("ERROR: " + err) );
</script>
</body>
</html>

Upvotes: 0

Thiago Romano
Thiago Romano

Reputation: 587

It seems the JSON data that you wrote in the question is not an array, therefore there is no need to iterate over the data. One option is to remove the forEach or fix the endpoint response if you have access to it.

This is the code that considers that the endpoint does not respond with an array:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <style>
    </style>
	
</head>
<body>

<div class="container">
    <table class="table table-stripped"> 
	    <thead>
		   <tr> 
		       <th> emp id</th>
			   <th> emp mygoals</th>
 		       <th> emp future</th>

		   </tr> 
		</thead>
	
	
      <tbody id="data" >
 </tbody>
  </table>
</div>


    <script>
  fetch("https://asdasd.free.beeceptor.com/a",
              {
              method: "GET",
              headers: {
                 "x-api-key": "p*****w"
              }
            }
          ).then(res =>{ 

        res.json().then(
		data=> {
		console.log(data);
		var temp ="";
		
	      temp +="<tr>";
		  temp += "<td>"+data.id+"</td>";
		  temp += "<td>"+data.mygoals+"</td>";
		  temp += "<td>"+data.future+"</td></tr>";

		   document.getElementById("data").innerHTML = temp
		}
	  )
    }
  )
 .catch(err => {
          console.log("ERROR: " + err);
        });
    </script>

</body>
</html>

Upvotes: 2

Related Questions