How to make a JSON formatted string which is retrieved by AJAX into a table like formatHow can I format numbers as currency string in JavaScript?How do I format a Microsoft JSON date?How do I make the first letter of a string uppercase in JavaScript?Why do people put code like “throw 1; <dont be evil>” and “for(;;);” in front of json responses?JavaScript/jQuery to download file via POST with JSON dataHow to decide when to use Node.js?How to make an AJAX call without jQuery?Difference between JSON.stringify and JSON.parseIs it possible to use a string to reference a json object within an Ajax statement?parse string contains '"' retrieved from mysql to JSON

Polish letters in ASME English template

How do I spend money in Sweden and Denmark?

How exactly is a normal force exerted, at the molecular level?

Dual statement category theory

Can I travel from Germany to England alone as an unaccompanied minor?

where clause to retrieve case record which are older than 12 months and 1 day in soql

How hard is it to sell a home which is currently mortgaged?

can’t run a function against EXEC

In native German words, is Q always followed by U, as in English?

One folder two different locations on ubuntu 18.04

Analog is Obtuse!

Was touching your nose a greeting in second millenium Mesopotamia?

Why is the Turkish president's surname spelt in Russian as Эрдоган, with г?

Is there any set of 2-6 notes that doesn't have a chord name?

Procedurally generate regions on island

Do 3D printers really reach 50 micron (0.050mm) accuracy?

Anagram Within an Anagram!

The difference between Rad1 and Rfd1

Why is the divergence of this series apparently not predicted by the Monotonic Sequence Theorem?

When is it ok to add filler to a story?

Why isn’t the tax system continuous rather than bracketed?

If a high rpm motor is run at lower rpm, will it produce more torque?

Golf the smallest circle!

Do sudoku answers always have a single minimal clue set?

How to make a JSON formatted string which is retrieved by AJAX into a table like format

How can I format numbers as currency string in JavaScript?How do I format a Microsoft JSON date?How do I make the first letter of a string uppercase in JavaScript?Why do people put code like “throw 1; <dont be evil>” and “for(;;);” in front of json responses?JavaScript/jQuery to download file via POST with JSON dataHow to decide when to use Node.js?How to make an AJAX call without jQuery?Difference between JSON.stringify and JSON.parseIs it possible to use a string to reference a json object within an Ajax statement?parse string contains '"' retrieved from mysql to JSON

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

I am new to web programming and have been having a lot of trouble with using AJAX to parse as a string and create a table.

["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]

This is how the data is parsed as I used the code from W3SCHOOLS but adapted it to my situation
I used the JSON stringify command to change it to a string also.
https://www.w3schools.com/js/js_json_php.asp
Based on the data above which has been retrieved by a AJAX code I am having troubles creating a table based on those results.

edited Mar 25 at 12:59

asked Mar 25 at 12:08

puzzledcoder

82 bronze badges

I think i may have copied it wrong but you are right

– puzzledcoder
Mar 25 at 12:11

2

Large chunks of code go in the question and should be formatted, not comments.

– Script47
Mar 25 at 12:11

This is my code Click the edit button, and modify you question instead of posting a comment.

– Keith
Mar 25 at 12:11

edit your question, never add code in comments, it's unreadable.

– u_mulder
Mar 25 at 12:11

Sorry Im a bit new to this

– puzzledcoder
Mar 25 at 12:13

|
show 3 more comments

I am new to web programming and have been having a lot of trouble with using AJAX to parse as a string and create a table.

["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]

edited Mar 25 at 12:59

asked Mar 25 at 12:08

puzzledcoder

82 bronze badges

I think i may have copied it wrong but you are right

– puzzledcoder
Mar 25 at 12:11

2

Large chunks of code go in the question and should be formatted, not comments.

– Script47
Mar 25 at 12:11

This is my code Click the edit button, and modify you question instead of posting a comment.

– Keith
Mar 25 at 12:11

edit your question, never add code in comments, it's unreadable.

– u_mulder
Mar 25 at 12:11

Sorry Im a bit new to this

– puzzledcoder
Mar 25 at 12:13

|
show 3 more comments

I am new to web programming and have been having a lot of trouble with using AJAX to parse as a string and create a table.

["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]

edited Mar 25 at 12:59

asked Mar 25 at 12:08

puzzledcoder

82 bronze badges

I am new to web programming and have been having a lot of trouble with using AJAX to parse as a string and create a table.

["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]

javascript php html ajax

edited Mar 25 at 12:59

asked Mar 25 at 12:08

puzzledcoder

82 bronze badges

edited Mar 25 at 12:59

asked Mar 25 at 12:08

puzzledcoder

82 bronze badges

edited Mar 25 at 12:59

asked Mar 25 at 12:08

puzzledcoder

82 bronze badges

asked Mar 25 at 12:08

puzzledcoder

82 bronze badges

asked Mar 25 at 12:08

puzzledcoder

82 bronze badges

I think i may have copied it wrong but you are right

– puzzledcoder
Mar 25 at 12:11

2

Large chunks of code go in the question and should be formatted, not comments.

– Script47
Mar 25 at 12:11

This is my code Click the edit button, and modify you question instead of posting a comment.

– Keith
Mar 25 at 12:11

edit your question, never add code in comments, it's unreadable.

– u_mulder
Mar 25 at 12:11

Sorry Im a bit new to this

– puzzledcoder
Mar 25 at 12:13

|
show 3 more comments

I think i may have copied it wrong but you are right

– puzzledcoder
Mar 25 at 12:11

2

Large chunks of code go in the question and should be formatted, not comments.

– Script47
Mar 25 at 12:11

This is my code Click the edit button, and modify you question instead of posting a comment.

– Keith
Mar 25 at 12:11

edit your question, never add code in comments, it's unreadable.

– u_mulder
Mar 25 at 12:11

Sorry Im a bit new to this

– puzzledcoder
Mar 25 at 12:13

I think i may have copied it wrong but you are right

– puzzledcoder
Mar 25 at 12:11

Large chunks of code go in the question and should be formatted, not comments.

– Script47
Mar 25 at 12:11

This is my code Click the edit button, and modify you question instead of posting a comment.

– Keith
Mar 25 at 12:11

edit your question, never add code in comments, it's unreadable.

– u_mulder
Mar 25 at 12:11

Sorry Im a bit new to this

– puzzledcoder
Mar 25 at 12:13

|
show 3 more comments

4 Answers
4

active

oldest

votes

If you want your myObj in a format like table, then there is nothing that automatically converts from an object to table format built into html/javascript.

You could use some lib's to do this, but for something simple the below might be a start for you.

const myObj = ["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"];

const tbody = document.querySelector("tbody");

myObj.forEach(r => 
 const tr = document.createElement("tr"); 
 ["source", "name", "amount"].forEach(f => 
 const td = document.createElement("td");
 td.innerText = r[f];
 tr.appendChild(td);
 );
 tbody.appendChild(tr);
);

<table border="1">
 <thead>
 <th>Source</th>
 <th>Name</th>
 <th>Amount</th>
 </thead>
 <tbody>
 </tbody>
</table>

answered Mar 25 at 12:23

Keith

10.1k1 gold badge8 silver badges21 bronze badges

add a comment |

You may want to consider some front end libraries to generate table like jquery DataTables or write your own implementation in pure JavaScript if you need something simpler.

answered Mar 25 at 12:20

Wujek280

212 bronze badges

would the <table> need to be with the html tags?

– puzzledcoder
Mar 25 at 12:25

That depends on context in which you are creating such table. But at the end of the day it should be in <html> tag.

– Wujek280
Mar 26 at 11:44

add a comment |

The problem is that JSON.stringify does not create a table. It creates a json string of an object. you need to create a table yourself by appending tr elements to a table or tbody tag like so:

const json = JSON.parse('["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]');

// querySelector is used to find an html element
// '#' means to search for an id so
// '#myTable' means to search to an element with the id 'myTable'
const tbody = document.querySelector('#myTable');

for (let i = 0; i < json.length; i++) 
 // First we need to create the td elements.
 const source = document.createElement('td');
 source.innerText = json[i]['source'];
 const name = document.createElement('td');
 name.innerText = json[i]['name'];
 const amount = document.createElement('td');
 amount.innerText = json[i]['amount'];
 
 //Then we need to create a tr to containt the tds
 const tr = document.createElement('tr');
 tr.appendChild(source);
 tr.appendChild(name);
 tr.appendChild(amount);
 
 //Finaly we need to add our tr to our tbody.
 tbody.appendChild(tr);

<table>
 <thead>
 <th>source</th>
 <th>name</th>
 <th>amount</th>
 </thead>
 <tbody id="myTable">
 <!-- the id is used to later refer to this tbody. -->
 </tbody>
</table>

answered Mar 25 at 12:29

Rain336

6253 silver badges6 bronze badges

add a comment |

I am just pasting a live working example for your help, you can modify based on your requirements. Actually, I think its a quick way to help someone. I am using a fake REST service available at https://jsonplaceholder.typicode.com/posts/.

I have already it in a page at https://hygull.github.io/pages/animations/ajax_data_fetch.html. If you wish you can inspect and see the code in body inside <script> & </script>. It is exactly like what you want. Just a little change required is, use source, name, amount in place of id, title, body etc. Also change the request URL.

Here is the example that you can modify and run at https://www.w3schools.com/code/tryit.asp?filename=G2FBIOPTDIQ6.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>POSTS EXAMPLE - RENDER RESPONSE FROM FAKE REST API</h2>
<a href="https://jsonplaceholder.typicode.com/posts/">https://jsonplaceholder.typicode.com/posts/</a>
<hr>
<table class="table table-condensed">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Body</th>
 </tr>
 </thead>

 <!-- TABLE BODY -->
 <tbody id="tbody">
 </tbody>
</table>
</div>

<script>
function setTable()
 xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() 
 if (this.readyState == 4 && this.status == 200) 
 posts = JSON.parse(this.responseText)

 var postsText=""

 for (var i=0; i < posts.length; i++)
 postsText += "<tr>" + "<td>" + posts[i].id + "</td><td>" + posts[i].title + "</td><td>" + posts[i].body + "</td></tr>";
 

 document.getElementById("tbody").innerHTML = postsText;
 
 ;
 xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/", true);
 xhttp.send();


setTable(); 
</script>
</body>
</html>

answered Mar 25 at 12:36

hygull

4,6152 gold badges16 silver badges32 bronze badges

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55337466%2fhow-to-make-a-json-formatted-string-which-is-retrieved-by-ajax-into-a-table-like%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

If you want your myObj in a format like table, then there is nothing that automatically converts from an object to table format built into html/javascript.

You could use some lib's to do this, but for something simple the below might be a start for you.

const myObj = ["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"];

const tbody = document.querySelector("tbody");

myObj.forEach(r => 
 const tr = document.createElement("tr"); 
 ["source", "name", "amount"].forEach(f => 
 const td = document.createElement("td");
 td.innerText = r[f];
 tr.appendChild(td);
 );
 tbody.appendChild(tr);
);

<table border="1">
 <thead>
 <th>Source</th>
 <th>Name</th>
 <th>Amount</th>
 </thead>
 <tbody>
 </tbody>
</table>

answered Mar 25 at 12:23

Keith

10.1k1 gold badge8 silver badges21 bronze badges

add a comment |

If you want your myObj in a format like table, then there is nothing that automatically converts from an object to table format built into html/javascript.

You could use some lib's to do this, but for something simple the below might be a start for you.

const myObj = ["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"];

const tbody = document.querySelector("tbody");

myObj.forEach(r => 
 const tr = document.createElement("tr"); 
 ["source", "name", "amount"].forEach(f => 
 const td = document.createElement("td");
 td.innerText = r[f];
 tr.appendChild(td);
 );
 tbody.appendChild(tr);
);

<table border="1">
 <thead>
 <th>Source</th>
 <th>Name</th>
 <th>Amount</th>
 </thead>
 <tbody>
 </tbody>
</table>

answered Mar 25 at 12:23

Keith

10.1k1 gold badge8 silver badges21 bronze badges

add a comment |

If you want your myObj in a format like table, then there is nothing that automatically converts from an object to table format built into html/javascript.

You could use some lib's to do this, but for something simple the below might be a start for you.

const myObj = ["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"];

const tbody = document.querySelector("tbody");

myObj.forEach(r => 
 const tr = document.createElement("tr"); 
 ["source", "name", "amount"].forEach(f => 
 const td = document.createElement("td");
 td.innerText = r[f];
 tr.appendChild(td);
 );
 tbody.appendChild(tr);
);

<table border="1">
 <thead>
 <th>Source</th>
 <th>Name</th>
 <th>Amount</th>
 </thead>
 <tbody>
 </tbody>
</table>

answered Mar 25 at 12:23

Keith

10.1k1 gold badge8 silver badges21 bronze badges

If you want your myObj in a format like table, then there is nothing that automatically converts from an object to table format built into html/javascript.

You could use some lib's to do this, but for something simple the below might be a start for you.

const myObj = ["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"];

const tbody = document.querySelector("tbody");

myObj.forEach(r => 
 const tr = document.createElement("tr"); 
 ["source", "name", "amount"].forEach(f => 
 const td = document.createElement("td");
 td.innerText = r[f];
 tr.appendChild(td);
 );
 tbody.appendChild(tr);
);

<table border="1">
 <thead>
 <th>Source</th>
 <th>Name</th>
 <th>Amount</th>
 </thead>
 <tbody>
 </tbody>
</table>

const myObj = ["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"];

const tbody = document.querySelector("tbody");

myObj.forEach(r => 
 const tr = document.createElement("tr"); 
 ["source", "name", "amount"].forEach(f => 
 const td = document.createElement("td");
 td.innerText = r[f];
 tr.appendChild(td);
 );
 tbody.appendChild(tr);
);

<table border="1">
 <thead>
 <th>Source</th>
 <th>Name</th>
 <th>Amount</th>
 </thead>
 <tbody>
 </tbody>
</table>

const myObj = ["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"];

const tbody = document.querySelector("tbody");

myObj.forEach(r => 
 const tr = document.createElement("tr"); 
 ["source", "name", "amount"].forEach(f => 
 const td = document.createElement("td");
 td.innerText = r[f];
 tr.appendChild(td);
 );
 tbody.appendChild(tr);
);

<table border="1">
 <thead>
 <th>Source</th>
 <th>Name</th>
 <th>Amount</th>
 </thead>
 <tbody>
 </tbody>
</table>

answered Mar 25 at 12:23

Keith

10.1k1 gold badge8 silver badges21 bronze badges

answered Mar 25 at 12:23

Keith

10.1k1 gold badge8 silver badges21 bronze badges

answered Mar 25 at 12:23

Keith

10.1k1 gold badge8 silver badges21 bronze badges

answered Mar 25 at 12:23

Keith

10.1k1 gold badge8 silver badges21 bronze badges

add a comment |

You may want to consider some front end libraries to generate table like jquery DataTables or write your own implementation in pure JavaScript if you need something simpler.

answered Mar 25 at 12:20

Wujek280

212 bronze badges

would the <table> need to be with the html tags?

– puzzledcoder
Mar 25 at 12:25

That depends on context in which you are creating such table. But at the end of the day it should be in <html> tag.

– Wujek280
Mar 26 at 11:44

add a comment |

You may want to consider some front end libraries to generate table like jquery DataTables or write your own implementation in pure JavaScript if you need something simpler.

answered Mar 25 at 12:20

Wujek280

212 bronze badges

would the <table> need to be with the html tags?

– puzzledcoder
Mar 25 at 12:25

That depends on context in which you are creating such table. But at the end of the day it should be in <html> tag.

– Wujek280
Mar 26 at 11:44

add a comment |

You may want to consider some front end libraries to generate table like jquery DataTables or write your own implementation in pure JavaScript if you need something simpler.

answered Mar 25 at 12:20

Wujek280

212 bronze badges

You may want to consider some front end libraries to generate table like jquery DataTables or write your own implementation in pure JavaScript if you need something simpler.

answered Mar 25 at 12:20

Wujek280

212 bronze badges

answered Mar 25 at 12:20

Wujek280

212 bronze badges

answered Mar 25 at 12:20

Wujek280

212 bronze badges

answered Mar 25 at 12:20

Wujek280

212 bronze badges

would the <table> need to be with the html tags?

– puzzledcoder
Mar 25 at 12:25

That depends on context in which you are creating such table. But at the end of the day it should be in <html> tag.

– Wujek280
Mar 26 at 11:44

add a comment |

would the <table> need to be with the html tags?

– puzzledcoder
Mar 25 at 12:25

That depends on context in which you are creating such table. But at the end of the day it should be in <html> tag.

– Wujek280
Mar 26 at 11:44

would the <table> need to be with the html tags?

– puzzledcoder
Mar 25 at 12:25

That depends on context in which you are creating such table. But at the end of the day it should be in <html> tag.

– Wujek280
Mar 26 at 11:44

add a comment |

The problem is that JSON.stringify does not create a table. It creates a json string of an object. you need to create a table yourself by appending tr elements to a table or tbody tag like so:

const json = JSON.parse('["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]');

// querySelector is used to find an html element
// '#' means to search for an id so
// '#myTable' means to search to an element with the id 'myTable'
const tbody = document.querySelector('#myTable');

for (let i = 0; i < json.length; i++) 
 // First we need to create the td elements.
 const source = document.createElement('td');
 source.innerText = json[i]['source'];
 const name = document.createElement('td');
 name.innerText = json[i]['name'];
 const amount = document.createElement('td');
 amount.innerText = json[i]['amount'];
 
 //Then we need to create a tr to containt the tds
 const tr = document.createElement('tr');
 tr.appendChild(source);
 tr.appendChild(name);
 tr.appendChild(amount);
 
 //Finaly we need to add our tr to our tbody.
 tbody.appendChild(tr);

<table>
 <thead>
 <th>source</th>
 <th>name</th>
 <th>amount</th>
 </thead>
 <tbody id="myTable">
 <!-- the id is used to later refer to this tbody. -->
 </tbody>
</table>

answered Mar 25 at 12:29

Rain336

6253 silver badges6 bronze badges

add a comment |

The problem is that JSON.stringify does not create a table. It creates a json string of an object. you need to create a table yourself by appending tr elements to a table or tbody tag like so:

const json = JSON.parse('["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]');

// querySelector is used to find an html element
// '#' means to search for an id so
// '#myTable' means to search to an element with the id 'myTable'
const tbody = document.querySelector('#myTable');

for (let i = 0; i < json.length; i++) 
 // First we need to create the td elements.
 const source = document.createElement('td');
 source.innerText = json[i]['source'];
 const name = document.createElement('td');
 name.innerText = json[i]['name'];
 const amount = document.createElement('td');
 amount.innerText = json[i]['amount'];
 
 //Then we need to create a tr to containt the tds
 const tr = document.createElement('tr');
 tr.appendChild(source);
 tr.appendChild(name);
 tr.appendChild(amount);
 
 //Finaly we need to add our tr to our tbody.
 tbody.appendChild(tr);

<table>
 <thead>
 <th>source</th>
 <th>name</th>
 <th>amount</th>
 </thead>
 <tbody id="myTable">
 <!-- the id is used to later refer to this tbody. -->
 </tbody>
</table>

answered Mar 25 at 12:29

Rain336

6253 silver badges6 bronze badges

add a comment |

The problem is that JSON.stringify does not create a table. It creates a json string of an object. you need to create a table yourself by appending tr elements to a table or tbody tag like so:

const json = JSON.parse('["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]');

// querySelector is used to find an html element
// '#' means to search for an id so
// '#myTable' means to search to an element with the id 'myTable'
const tbody = document.querySelector('#myTable');

for (let i = 0; i < json.length; i++) 
 // First we need to create the td elements.
 const source = document.createElement('td');
 source.innerText = json[i]['source'];
 const name = document.createElement('td');
 name.innerText = json[i]['name'];
 const amount = document.createElement('td');
 amount.innerText = json[i]['amount'];
 
 //Then we need to create a tr to containt the tds
 const tr = document.createElement('tr');
 tr.appendChild(source);
 tr.appendChild(name);
 tr.appendChild(amount);
 
 //Finaly we need to add our tr to our tbody.
 tbody.appendChild(tr);

<table>
 <thead>
 <th>source</th>
 <th>name</th>
 <th>amount</th>
 </thead>
 <tbody id="myTable">
 <!-- the id is used to later refer to this tbody. -->
 </tbody>
</table>

answered Mar 25 at 12:29

Rain336

6253 silver badges6 bronze badges

The problem is that JSON.stringify does not create a table. It creates a json string of an object. you need to create a table yourself by appending tr elements to a table or tbody tag like so:

const json = JSON.parse('["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]');

// querySelector is used to find an html element
// '#' means to search for an id so
// '#myTable' means to search to an element with the id 'myTable'
const tbody = document.querySelector('#myTable');

for (let i = 0; i < json.length; i++) 
 // First we need to create the td elements.
 const source = document.createElement('td');
 source.innerText = json[i]['source'];
 const name = document.createElement('td');
 name.innerText = json[i]['name'];
 const amount = document.createElement('td');
 amount.innerText = json[i]['amount'];
 
 //Then we need to create a tr to containt the tds
 const tr = document.createElement('tr');
 tr.appendChild(source);
 tr.appendChild(name);
 tr.appendChild(amount);
 
 //Finaly we need to add our tr to our tbody.
 tbody.appendChild(tr);

<table>
 <thead>
 <th>source</th>
 <th>name</th>
 <th>amount</th>
 </thead>
 <tbody id="myTable">
 <!-- the id is used to later refer to this tbody. -->
 </tbody>
</table>

const json = JSON.parse('["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]');

// querySelector is used to find an html element
// '#' means to search for an id so
// '#myTable' means to search to an element with the id 'myTable'
const tbody = document.querySelector('#myTable');

for (let i = 0; i < json.length; i++) 
 // First we need to create the td elements.
 const source = document.createElement('td');
 source.innerText = json[i]['source'];
 const name = document.createElement('td');
 name.innerText = json[i]['name'];
 const amount = document.createElement('td');
 amount.innerText = json[i]['amount'];
 
 //Then we need to create a tr to containt the tds
 const tr = document.createElement('tr');
 tr.appendChild(source);
 tr.appendChild(name);
 tr.appendChild(amount);
 
 //Finaly we need to add our tr to our tbody.
 tbody.appendChild(tr);

<table>
 <thead>
 <th>source</th>
 <th>name</th>
 <th>amount</th>
 </thead>
 <tbody id="myTable">
 <!-- the id is used to later refer to this tbody. -->
 </tbody>
</table>

const json = JSON.parse('["source":"1","name":"random","amount":"5","source":"1","name":"random","amount":"5"]');

// querySelector is used to find an html element
// '#' means to search for an id so
// '#myTable' means to search to an element with the id 'myTable'
const tbody = document.querySelector('#myTable');

for (let i = 0; i < json.length; i++) 
 // First we need to create the td elements.
 const source = document.createElement('td');
 source.innerText = json[i]['source'];
 const name = document.createElement('td');
 name.innerText = json[i]['name'];
 const amount = document.createElement('td');
 amount.innerText = json[i]['amount'];
 
 //Then we need to create a tr to containt the tds
 const tr = document.createElement('tr');
 tr.appendChild(source);
 tr.appendChild(name);
 tr.appendChild(amount);
 
 //Finaly we need to add our tr to our tbody.
 tbody.appendChild(tr);

<table>
 <thead>
 <th>source</th>
 <th>name</th>
 <th>amount</th>
 </thead>
 <tbody id="myTable">
 <!-- the id is used to later refer to this tbody. -->
 </tbody>
</table>

answered Mar 25 at 12:29

Rain336

6253 silver badges6 bronze badges

answered Mar 25 at 12:29

Rain336

6253 silver badges6 bronze badges

answered Mar 25 at 12:29

Rain336

6253 silver badges6 bronze badges

answered Mar 25 at 12:29

Rain336

6253 silver badges6 bronze badges

add a comment |

I have already it in a page at https://hygull.github.io/pages/animations/ajax_data_fetch.html. If you wish you can inspect and see the code in body inside <script> & </script>. It is exactly like what you want. Just a little change required is, use source, name, amount in place of id, title, body etc. Also change the request URL.

Here is the example that you can modify and run at https://www.w3schools.com/code/tryit.asp?filename=G2FBIOPTDIQ6.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>POSTS EXAMPLE - RENDER RESPONSE FROM FAKE REST API</h2>
<a href="https://jsonplaceholder.typicode.com/posts/">https://jsonplaceholder.typicode.com/posts/</a>
<hr>
<table class="table table-condensed">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Body</th>
 </tr>
 </thead>

 <!-- TABLE BODY -->
 <tbody id="tbody">
 </tbody>
</table>
</div>

<script>
function setTable()
 xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() 
 if (this.readyState == 4 && this.status == 200) 
 posts = JSON.parse(this.responseText)

 var postsText=""

 for (var i=0; i < posts.length; i++)
 postsText += "<tr>" + "<td>" + posts[i].id + "</td><td>" + posts[i].title + "</td><td>" + posts[i].body + "</td></tr>";
 

 document.getElementById("tbody").innerHTML = postsText;
 
 ;
 xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/", true);
 xhttp.send();


setTable(); 
</script>
</body>
</html>

answered Mar 25 at 12:36

hygull

4,6152 gold badges16 silver badges32 bronze badges

add a comment |

I have already it in a page at https://hygull.github.io/pages/animations/ajax_data_fetch.html. If you wish you can inspect and see the code in body inside <script> & </script>. It is exactly like what you want. Just a little change required is, use source, name, amount in place of id, title, body etc. Also change the request URL.

Here is the example that you can modify and run at https://www.w3schools.com/code/tryit.asp?filename=G2FBIOPTDIQ6.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>POSTS EXAMPLE - RENDER RESPONSE FROM FAKE REST API</h2>
<a href="https://jsonplaceholder.typicode.com/posts/">https://jsonplaceholder.typicode.com/posts/</a>
<hr>
<table class="table table-condensed">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Body</th>
 </tr>
 </thead>

 <!-- TABLE BODY -->
 <tbody id="tbody">
 </tbody>
</table>
</div>

<script>
function setTable()
 xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() 
 if (this.readyState == 4 && this.status == 200) 
 posts = JSON.parse(this.responseText)

 var postsText=""

 for (var i=0; i < posts.length; i++)
 postsText += "<tr>" + "<td>" + posts[i].id + "</td><td>" + posts[i].title + "</td><td>" + posts[i].body + "</td></tr>";
 

 document.getElementById("tbody").innerHTML = postsText;
 
 ;
 xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/", true);
 xhttp.send();


setTable(); 
</script>
</body>
</html>

answered Mar 25 at 12:36

hygull

4,6152 gold badges16 silver badges32 bronze badges

add a comment |

I have already it in a page at https://hygull.github.io/pages/animations/ajax_data_fetch.html. If you wish you can inspect and see the code in body inside <script> & </script>. It is exactly like what you want. Just a little change required is, use source, name, amount in place of id, title, body etc. Also change the request URL.

Here is the example that you can modify and run at https://www.w3schools.com/code/tryit.asp?filename=G2FBIOPTDIQ6.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>POSTS EXAMPLE - RENDER RESPONSE FROM FAKE REST API</h2>
<a href="https://jsonplaceholder.typicode.com/posts/">https://jsonplaceholder.typicode.com/posts/</a>
<hr>
<table class="table table-condensed">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Body</th>
 </tr>
 </thead>

 <!-- TABLE BODY -->
 <tbody id="tbody">
 </tbody>
</table>
</div>

<script>
function setTable()
 xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() 
 if (this.readyState == 4 && this.status == 200) 
 posts = JSON.parse(this.responseText)

 var postsText=""

 for (var i=0; i < posts.length; i++)
 postsText += "<tr>" + "<td>" + posts[i].id + "</td><td>" + posts[i].title + "</td><td>" + posts[i].body + "</td></tr>";
 

 document.getElementById("tbody").innerHTML = postsText;
 
 ;
 xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/", true);
 xhttp.send();


setTable(); 
</script>
</body>
</html>

answered Mar 25 at 12:36

hygull

4,6152 gold badges16 silver badges32 bronze badges

I have already it in a page at https://hygull.github.io/pages/animations/ajax_data_fetch.html. If you wish you can inspect and see the code in body inside <script> & </script>. It is exactly like what you want. Just a little change required is, use source, name, amount in place of id, title, body etc. Also change the request URL.

Here is the example that you can modify and run at https://www.w3schools.com/code/tryit.asp?filename=G2FBIOPTDIQ6.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>POSTS EXAMPLE - RENDER RESPONSE FROM FAKE REST API</h2>
<a href="https://jsonplaceholder.typicode.com/posts/">https://jsonplaceholder.typicode.com/posts/</a>
<hr>
<table class="table table-condensed">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Body</th>
 </tr>
 </thead>

 <!-- TABLE BODY -->
 <tbody id="tbody">
 </tbody>
</table>
</div>

<script>
function setTable()
 xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() 
 if (this.readyState == 4 && this.status == 200) 
 posts = JSON.parse(this.responseText)

 var postsText=""

 for (var i=0; i < posts.length; i++)
 postsText += "<tr>" + "<td>" + posts[i].id + "</td><td>" + posts[i].title + "</td><td>" + posts[i].body + "</td></tr>";
 

 document.getElementById("tbody").innerHTML = postsText;
 
 ;
 xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/", true);
 xhttp.send();


setTable(); 
</script>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>POSTS EXAMPLE - RENDER RESPONSE FROM FAKE REST API</h2>
<a href="https://jsonplaceholder.typicode.com/posts/">https://jsonplaceholder.typicode.com/posts/</a>
<hr>
<table class="table table-condensed">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Body</th>
 </tr>
 </thead>

 <!-- TABLE BODY -->
 <tbody id="tbody">
 </tbody>
</table>
</div>

<script>
function setTable()
 xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() 
 if (this.readyState == 4 && this.status == 200) 
 posts = JSON.parse(this.responseText)

 var postsText=""

 for (var i=0; i < posts.length; i++)
 postsText += "<tr>" + "<td>" + posts[i].id + "</td><td>" + posts[i].title + "</td><td>" + posts[i].body + "</td></tr>";
 

 document.getElementById("tbody").innerHTML = postsText;
 
 ;
 xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/", true);
 xhttp.send();


setTable(); 
</script>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>POSTS EXAMPLE - RENDER RESPONSE FROM FAKE REST API</h2>
<a href="https://jsonplaceholder.typicode.com/posts/">https://jsonplaceholder.typicode.com/posts/</a>
<hr>
<table class="table table-condensed">
 <thead>
 <tr>
 <th>Id</th>
 <th>Title</th>
 <th>Body</th>
 </tr>
 </thead>

 <!-- TABLE BODY -->
 <tbody id="tbody">
 </tbody>
</table>
</div>

<script>
function setTable()
 xhttp = new XMLHttpRequest();

 xhttp.onreadystatechange = function() 
 if (this.readyState == 4 && this.status == 200) 
 posts = JSON.parse(this.responseText)

 var postsText=""

 for (var i=0; i < posts.length; i++)
 postsText += "<tr>" + "<td>" + posts[i].id + "</td><td>" + posts[i].title + "</td><td>" + posts[i].body + "</td></tr>";
 

 document.getElementById("tbody").innerHTML = postsText;
 
 ;
 xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/", true);
 xhttp.send();


setTable(); 
</script>
</body>
</html>

answered Mar 25 at 12:36

hygull

4,6152 gold badges16 silver badges32 bronze badges

answered Mar 25 at 12:36

hygull

4,6152 gold badges16 silver badges32 bronze badges

answered Mar 25 at 12:36

hygull

4,6152 gold badges16 silver badges32 bronze badges

answered Mar 25 at 12:36

hygull

4,6152 gold badges16 silver badges32 bronze badges

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Styjun

4 Answers
4

Your Answer

Post as a guest

4 Answers
4

4 Answers
4

Post as a guest

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

4 Answers 4

4 Answers 4

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현

4 Answers
4

4 Answers
4

4 Answers
4