🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 173 (from laksa095)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa173.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://www.aspsnippets.com/Articles/3658/Populate-Table-from-API-using-jQuery/\')), getAhrefsUnparsedNoserviceFromURL(\'https://www.aspsnippets.com/Articles/3658/Populate-Table-from-API-using-jQuery/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/www.aspsnippets.com\/Articles\/3658\/Populate-Table-from-API-using-jQuery\/","crawl_time":1775328361,"first_indexed_time":1700702670,"http_code":200,"src_unparsed":"com,aspsnippets!www,\/Articles\/3658\/Populate-Table-from-API-using-jQuery\/ s443","src_root_hash":"15149566428044961973","history_drop_reason":null,"meta_title":"Populate Table from API using jQuery","meta_descriptions":["explained with an example, how to populate HTML Table from external API using jQuery."],"attrs_boilerpipe_text":"In this article I will explain with an example, how to populate HTML Table from external API using\njQuery\n.\nASPSnippets Test API\nThe following API will be used in this article.\nThe API returns the following JSON.\n[\n   {\n      \"CustomerId\":1,\n      \"Name\":\"John Hammond\",\n      \"Country\":\"United States\"\n   },\n   {\n      \"CustomerId\":2,\n      \"Name\":\"Mudassar Khan\",\n      \"Country\":\"India\"\n   },\n   {\n      \"CustomerId\":3,\n      \"Name\":\"Suzanne Mathews\",\n      \"Country\":\"France\"\n   },\n   {\n      \"CustomerId\":4,\n      \"Name\":\"Robert Schidner\",\n      \"Country\":\"Russia\"\n   }\n]\nHTML Markup\nThe following HTML Markup consists of an HTML DIV element.\n<\nh4\n>\nCustomers\n<\/\nh4\n>\n<\nhr\n\/>\n<\ndiv\nid\n=\"dvCustomersGrid\"><\/\ndiv\n>\nPopulating HTML Table from API using jQuery\nInside the\njQuery\ndocument ready\nevent handler, the API URL is called using the\njQuery\nget\nfunction.\nInside the\njQuery\nget\nsuccess\nevent, the received response is converted to JavaScript Array using the\nJSON.parse\nJavaScript function and set in the\ncustomers\nvariable.\nAdding the Header Row\nThe Header Row will be built using Table TH element and appended using\njQuery\n.\nAdding the Data Rows\nA loop is executed over the Array elements and one by one a Row is created in the HTML Table.\nTable insertRow Method\n: This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.\nThen inside each Row, a dynamic Cell element is created and appended using\njQuery\n.\nAdding the dynamic Table to the Page\nFinally, the dynamically created table is added to the page by appending it to the HTML DIV using the\nappend\nmethod.\nNote\n: You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place.\n<\nscript\ntype\n=\"text\/javascript\"\nsrc\n=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\"><\/\nscript\n>\n<\nscript\ntype\n=\"text\/javascript\">\n    $(\nfunction\n() {\n        $.get(\n\"https:\/\/raw.githubusercontent.com\/aspsnippets\/test\/master\/Customers.json\"\n,\nfunction\n(data, status) {\n            \nvar\ncustomers = JSON.parse(data);\n           \n\/\/Create a HTML Table element.\n           \nvar\ntable = $(\n\"<table \/>\"\n);\n            table[0].border =\n\"1\"\n;\n           \n\/\/Add the header row.\n           \nvar\nrow = $(table[0].insertRow(-1));\n           \n\/\/Add the header cells.\n           \nvar\nheaderCell = $(\n\"<th \/>\"\n);\n            headerCell.html(\n\"CustomerId\"\n);\n            row.append(headerCell);\n           \nvar\nheaderCell = $(\n\"<th \/>\"\n);\n            headerCell.html(\n\"Name\"\n);\n            row.append(headerCell);\n           \nvar\nheaderCell = $(\n\"<th \/>\"\n);\n            headerCell.html(\n\"Country\"\n);\n            row.append(headerCell);\n           \n\/\/Add the data rows.\n           \nfor\n(\nvar\ni = 0; i < customers.length; i++) {\n               \n\/\/Add the data row.\n               \nvar\nrow = $(table[0].insertRow(-1));\n               \n\/\/Add the data cells.\n               \nvar\ncell = $(\n\"<td \/>\"\n);\n                cell.html(customers[i].CustomerId);\n                row.append(cell);\n                cell = $(\n\"<td \/>\"\n);\n                cell.html(customers[i].Name);\n                row.append(cell);\n                cell = $(\n\"<td \/>\"\n);\n                cell.html(customers[i].Country);\n                row.append(cell);\n            }\n           \nvar\ndvTable = $(\n\"#dvCustomersGrid\"\n);\n            dvTable.html(\n\"\"\n);\n            dvTable.append(table);\n        });\n    });\n<\/\nscript\n>\nScreenshot\nBrowser Compatibility\nThe above code has been tested in the following browsers.\n \n \n \n \n* All browser logos displayed above are property of their respective owners.\nDemo\nDownloads","attrs_markdown":"[![logo](https:\/\/www.aspsnippets.com\/assets\/img\/logo_ns.webp)](https:\/\/www.aspsnippets.com\/)\n\nحضرت خواجہ سیدنا معین الدین حسن چشتی سنجاری اجمیری رحمۃ اللہ علیہ\n\n[![logo](https:\/\/www.aspsnippets.com\/assets\/img\/logo_ns.webp)](https:\/\/www.aspsnippets.com\/)\n\n- [HOME](https:\/\/www.aspsnippets.com\/)\n- [BLOGS](https:\/\/www.aspsnippets.com\/articles\/all)\n  - [ASP.Net](https:\/\/www.aspsnippets.com\/Categories\/ASP.Net\/)\n    \n    [C\\#.Net](https:\/\/www.aspsnippets.com\/Categories\/C.Net\/)\n    \n    [JavaScript](https:\/\/www.aspsnippets.com\/Categories\/JavaScript\/)\n    \n    [ADO.Net](https:\/\/www.aspsnippets.com\/Categories\/ADO.Net\/)\n    \n    [Excel](https:\/\/www.aspsnippets.com\/Categories\/Excel\/)\n    \n    [AJAX](https:\/\/www.aspsnippets.com\/Categories\/AJAX\/)\n    \n    [VB.Net](https:\/\/www.aspsnippets.com\/Categories\/VB.Net\/)\n    \n    [SQL Server](https:\/\/www.aspsnippets.com\/Categories\/SQL-Server\/)\n    \n    [GridView](https:\/\/www.aspsnippets.com\/Categories\/GridView\/)\n    \n    [Issues and Exceptions](https:\/\/www.aspsnippets.com\/Categories\/Issues-and-Exceptions\/)\n    \n    [Silverlight](https:\/\/www.aspsnippets.com\/Categories\/Silverlight\/)\n    \n    [Rich Text Editor](https:\/\/www.aspsnippets.com\/Categories\/Rich-Text-Editor\/)\n    \n    [jQuery](https:\/\/www.aspsnippets.com\/Categories\/jQuery\/)\n    \n    [DataList](https:\/\/www.aspsnippets.com\/Categories\/DataList\/)\n    \n    [Snippets](https:\/\/www.aspsnippets.com\/Categories\/Snippets\/)\n    \n    [XML](https:\/\/www.aspsnippets.com\/Categories\/XML\/)\n    \n    [New Features](https:\/\/www.aspsnippets.com\/Categories\/New-Features\/)\n    \n    [.Net 4.0](https:\/\/www.aspsnippets.com\/Categories\/.Net-4.0\/)\n    \n    [TreeView](https:\/\/www.aspsnippets.com\/Categories\/TreeView\/)\n    \n    [AJAX Control Toolkit](https:\/\/www.aspsnippets.com\/Categories\/AJAX-Control-Toolkit\/)\n    \n    [jQuery Plugins](https:\/\/www.aspsnippets.com\/Categories\/jQuery-Plugins\/)\n    \n    [Third Party Controls](https:\/\/www.aspsnippets.com\/Categories\/Third-Party-Controls\/)\n    \n    [ASP.Net Validators](https:\/\/www.aspsnippets.com\/Categories\/ASP.Net-Validators\/)\n    \n    [WCF](https:\/\/www.aspsnippets.com\/Categories\/WCF\/)\n    \n    [Repeater](https:\/\/www.aspsnippets.com\/Categories\/Repeater\/)\n    \n    [Regular Expressions](https:\/\/www.aspsnippets.com\/Categories\/Regular-Expressions\/)\n    \n    [Yahoo API](https:\/\/www.aspsnippets.com\/Categories\/Yahoo-API\/)\n    \n    [iTextSharp](https:\/\/www.aspsnippets.com\/Categories\/iTextSharp\/)\n    \n    [FaceBook](https:\/\/www.aspsnippets.com\/Categories\/FaceBook\/)\n    \n    [Charts](https:\/\/www.aspsnippets.com\/Categories\/Charts\/)\n    \n    [ListView](https:\/\/www.aspsnippets.com\/Categories\/ListView\/)\n    \n    [Tweeter](https:\/\/www.aspsnippets.com\/Categories\/Tweeter\/)\n    \n    [Google](https:\/\/www.aspsnippets.com\/Categories\/Google\/)\n    \n    [CSS](https:\/\/www.aspsnippets.com\/Categories\/CSS\/)\n    \n    [SMS](https:\/\/www.aspsnippets.com\/Categories\/SMS\/)\n    \n    [DotNetZip](https:\/\/www.aspsnippets.com\/Categories\/DotNetZip\/)\n    \n    [Crystal Reports](https:\/\/www.aspsnippets.com\/Categories\/Crystal-Reports\/)\n    \n    [Entity Framework](https:\/\/www.aspsnippets.com\/Categories\/Entity-Framework\/)\n    \n    [HyperLink](https:\/\/www.aspsnippets.com\/Categories\/HyperLink\/)\n    \n    [RDLC Report](https:\/\/www.aspsnippets.com\/Categories\/RDLC-Report\/)\n    \n    [SqlDataSource](https:\/\/www.aspsnippets.com\/Categories\/SqlDataSource\/)\n    \n    [Menu](https:\/\/www.aspsnippets.com\/Categories\/Menu\/)\n    \n    [YouTube](https:\/\/www.aspsnippets.com\/Categories\/YouTube\/)\n    \n    [Twitter](https:\/\/www.aspsnippets.com\/Categories\/Twitter\/)\n    \n    [HTML](https:\/\/www.aspsnippets.com\/Categories\/HTML\/)\n    \n    [XmlDataSource](https:\/\/www.aspsnippets.com\/Categories\/XmlDataSource\/)\n    \n    [ListBox](https:\/\/www.aspsnippets.com\/Categories\/ListBox\/)\n    \n    [Tips](https:\/\/www.aspsnippets.com\/Categories\/Tips\/)\n    \n    [DataGridView](https:\/\/www.aspsnippets.com\/Categories\/DataGridView\/)\n    \n    [Cryptography](https:\/\/www.aspsnippets.com\/Categories\/Cryptography\/)\n    \n    [Windows Forms](https:\/\/www.aspsnippets.com\/Categories\/Windows-Forms\/)\n    \n    [LinkedIn](https:\/\/www.aspsnippets.com\/Categories\/LinkedIn\/)\n    \n    [WebUserControl](https:\/\/www.aspsnippets.com\/Categories\/WebUserControl\/)\n    \n    [RSS Feeds](https:\/\/www.aspsnippets.com\/Categories\/RSS-Feeds\/)\n    \n    [HTML5](https:\/\/www.aspsnippets.com\/Categories\/HTML5\/)\n    \n    [Sitemap](https:\/\/www.aspsnippets.com\/Categories\/Sitemap\/)\n    \n    [IIS](https:\/\/www.aspsnippets.com\/Categories\/IIS\/)\n    \n    [LINQ](https:\/\/www.aspsnippets.com\/Categories\/LINQ\/)\n    \n    [DataPager](https:\/\/www.aspsnippets.com\/Categories\/DataPager\/)\n    \n    [URL Routing](https:\/\/www.aspsnippets.com\/Categories\/URL-Routing\/)\n    \n    [SqlBulkCopy](https:\/\/www.aspsnippets.com\/Categories\/SqlBulkCopy\/)\n    \n    [OCR](https:\/\/www.aspsnippets.com\/Categories\/OCR\/)\n    \n    [ASP.Net 4.5](https:\/\/www.aspsnippets.com\/Categories\/ASPNet-45\/)\n    \n    [Master Pages](https:\/\/www.aspsnippets.com\/Categories\/Master-Pages\/)\n    \n    [MySQL](https:\/\/www.aspsnippets.com\/Categories\/MySQL\/)\n    \n    [CSV](https:\/\/www.aspsnippets.com\/Categories\/CSV\/)\n    \n    [Stored Procedures](https:\/\/www.aspsnippets.com\/Categories\/Stored-Procedures\/)\n    \n    [JSON](https:\/\/www.aspsnippets.com\/Categories\/JSON\/)\n    \n    [Web Services](https:\/\/www.aspsnippets.com\/Categories\/Web-Services\/)\n    \n    [Bootstrap](https:\/\/www.aspsnippets.com\/Categories\/Bootstrap\/)\n    \n    [Windows Service](https:\/\/www.aspsnippets.com\/Categories\/Windows-Service\/)\n    \n    [DataTable](https:\/\/www.aspsnippets.com\/Categories\/DataTable\/)\n    \n    [App.Config](https:\/\/www.aspsnippets.com\/Categories\/AppConfig\/)\n    \n    [Visual Studio](https:\/\/www.aspsnippets.com\/Categories\/Visual-Studio\/)\n    \n    [RadioButton](https:\/\/www.aspsnippets.com\/Categories\/RadioButton\/)\n    \n    [CheckBox](https:\/\/www.aspsnippets.com\/Categories\/CheckBox\/)\n    \n    [Generic Handler](https:\/\/www.aspsnippets.com\/Categories\/Generic-Handler\/)\n    \n    [DropDownList](https:\/\/www.aspsnippets.com\/Categories\/DropDownList\/)\n    \n    [FileUpload](https:\/\/www.aspsnippets.com\/Categories\/FileUpload\/)\n    \n    [RadioButtonList](https:\/\/www.aspsnippets.com\/Categories\/RadioButtonList\/)\n    \n    [CheckBoxList](https:\/\/www.aspsnippets.com\/Categories\/CheckBoxList\/)\n    \n    [Flash](https:\/\/www.aspsnippets.com\/Categories\/Flash\/)\n    \n    [HtmlEditorExtender](https:\/\/www.aspsnippets.com\/Categories\/HtmlEditorExtender\/)\n    \n    [Div](https:\/\/www.aspsnippets.com\/Categories\/Div\/)\n    \n    [Table](https:\/\/www.aspsnippets.com\/Categories\/Table\/)\n    \n    [AngularJS](https:\/\/www.aspsnippets.com\/Categories\/AngularJS\/)\n    \n    [DataReader](https:\/\/www.aspsnippets.com\/Categories\/DataReader\/)\n    \n    [DataSet](https:\/\/www.aspsnippets.com\/Categories\/DataSet\/)\n    \n    [Console Applications](https:\/\/www.aspsnippets.com\/Categories\/Console-Applications\/)\n    \n    [FTP](https:\/\/www.aspsnippets.com\/Categories\/FTP\/)\n    \n    [DetailsView](https:\/\/www.aspsnippets.com\/Categories\/DetailsView\/)\n    \n    [Password TextBox](https:\/\/www.aspsnippets.com\/Categories\/Password-TextBox\/)\n    \n    [Enum](https:\/\/www.aspsnippets.com\/Categories\/Enum\/)\n    \n    [ComboBox](https:\/\/www.aspsnippets.com\/Categories\/ComboBox\/)\n    \n    [Sponsored](https:\/\/www.aspsnippets.com\/Categories\/Sponsored\/)\n    \n    [SqlDataAdapter](https:\/\/www.aspsnippets.com\/Categories\/SqlDataAdapter\/)\n    \n    [OpenXml](https:\/\/www.aspsnippets.com\/Categories\/OpenXml\/)\n    \n    [ClosedXml](https:\/\/www.aspsnippets.com\/Categories\/ClosedXml\/)\n    \n    [SiteMapPath](https:\/\/www.aspsnippets.com\/Categories\/SiteMapPath\/)\n    \n    [Arrays](https:\/\/www.aspsnippets.com\/Categories\/Arrays\/)\n    \n    [FormView](https:\/\/www.aspsnippets.com\/Categories\/FormView\/)\n- [FORUMS](https:\/\/www.aspsnippets.com\/Articles\/3658\/Populate-Table-from-API-using-jQuery\/)\n  - [Questions](https:\/\/www.aspsnippets.com\/questions\/all)\n  - [Ask Question](https:\/\/www.aspsnippets.com\/questions\/ask)\n- [VIDEOS](https:\/\/www.aspsnippets.com\/videos\/all)\n- [![](https:\/\/www.aspsnippets.com\/images\/ai_new.png)]()\n- [SEARCH]()\n- [INTERVIEW](https:\/\/www.aspsnippets.com\/Articles\/3658\/Populate-Table-from-API-using-jQuery\/)\n  - [Interview Questions](https:\/\/www.aspsnippets.com\/interviewquestions\/all)\n- [COMMUNITY](https:\/\/www.aspsnippets.com\/Articles\/3658\/Populate-Table-from-API-using-jQuery\/)\n  - [Users](https:\/\/www.aspsnippets.com\/users\/all\/)\n- [CONTACT](https:\/\/www.aspsnippets.com\/contact\/)\n\n- ![Click to Login.](https:\/\/www.aspsnippets.com\/assets\/img\/login_btn.png)\n\nSearch\n\nAsk Question\n\n[![Image](https:\/\/www.aspsnippets.com\/assets\/img\/logo_ns.webp)](https:\/\/www.aspsnippets.com\/)\n\n### Company\n- [About us](https:\/\/www.aspsnippets.com\/Articles\/3658\/Populate-Table-from-API-using-jQuery\/)\n- [Contact us](https:\/\/www.aspsnippets.com\/contact\/)\n\n### Explore\n- [Ask question](https:\/\/www.aspsnippets.com\/questions\/ask)\n- [FAQs]()\n- [Privacy policy](https:\/\/www.aspsnippets.com\/PrivacyPolicy)\n\n### Follow us\n- [Facebook](https:\/\/www.facebook.com\/ASPSnippets\/)\n- [Instagram](https:\/\/www.instagram.com\/ASPSnippets\/)\n- [YouTube](https:\/\/youtube.com\/ASPSnippetsChannel)\n- [Twitter](https:\/\/www.twitter.com\/ASPSnippets)\n\n### Contact Us\n- Email: [webmaster@aspsnippets.com](mailto:webmaster@aspsnippets.com)\n- Address:  \n   ASPSNIPPETS PRIVATE LIMITED  \n   G-110, SHAGUN ARCADE,  \n   MALAD (EAST),  \n   MUMBAI, MAHARASHTRA,  \n   INDIA 400097.\n\n© COPYRIGHT 2026 [ASPSnippets.com](https:\/\/www.aspsnippets.com\/) ALL RIGHTS RESERVED.\n\nDisclaimer\n\nThis site makes use of Cookies. Please refer [Privacy Policy](https:\/\/www.aspsnippets.com\/PrivacyPolicy) for more details.\n***\n[Allow]() [Reject]()","attrs_readable_markdown":"In this article I will explain with an example, how to populate HTML Table from external API using [jQuery](https:\/\/www.aspsnippets.com\/Categories\/jQuery.aspx).\n\n**ASPSnippets Test API**\n\nThe following API will be used in this article.\n\nThe API returns the following JSON.\n\n\\[\n\n{\n\n\"CustomerId\":1,\n\n\"Name\":\"John Hammond\",\n\n\"Country\":\"United States\"\n\n},\n\n{\n\n\"CustomerId\":2,\n\n\"Name\":\"Mudassar Khan\",\n\n\"Country\":\"India\"\n\n},\n\n{\n\n\"CustomerId\":3,\n\n\"Name\":\"Suzanne Mathews\",\n\n\"Country\":\"France\"\n\n},\n\n{\n\n\"CustomerId\":4,\n\n\"Name\":\"Robert Schidner\",\n\n\"Country\":\"Russia\"\n\n}\n\n\\]\n\n**HTML Markup**\n\nThe following HTML Markup consists of an HTML DIV element.\n\n\\<h4\\>Customers\\<\/h4\\>\n\n\\<hr\/\\>\n\n\\<div id\\=\"dvCustomersGrid\"\\>\\<\/div\\>\n\n**Populating HTML Table from API using jQuery**\n\nInside the [jQuery](https:\/\/www.aspsnippets.com\/Categories\/jQuery.aspx) document ready event handler, the API URL is called using the [jQuery](https:\/\/www.aspsnippets.com\/Categories\/jQuery.aspx) get function.\n\nInside the [jQuery](https:\/\/www.aspsnippets.com\/Categories\/jQuery.aspx) get success event, the received response is converted to JavaScript Array using the JSON.parse JavaScript function and set in the customers variable.\n\nAdding the Header Row\n\nThe Header Row will be built using Table TH element and appended using [jQuery](https:\/\/www.aspsnippets.com\/Categories\/jQuery.aspx).\n\nAdding the Data Rows\n\nA loop is executed over the Array elements and one by one a Row is created in the HTML Table.\n\nTable insertRow Method : This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.\n\nThen inside each Row, a dynamic Cell element is created and appended using [jQuery](https:\/\/www.aspsnippets.com\/Categories\/jQuery.aspx).\n\nAdding the dynamic Table to the Page\n\nFinally, the dynamically created table is added to the page by appending it to the HTML DIV using the append method.\n\n**Note**: You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place.\n\n\\<script type\\=\"text\/javascript\" src\\=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\"\\>\\<\/script\\>\n\n\\<script type\\=\"text\/javascript\"\\>\n\n\\$(function () {\n\n\\$.get(\"https:\/\/raw.githubusercontent.com\/aspsnippets\/test\/master\/Customers.json\", function (data, status) {\n\nvar customers = JSON.parse(data);\n\n\/\/Create a HTML Table element.\n\nvar table = \\$(\"\\<table \/\\>\");\n\ntable\\[0\\].border = \"1\";\n\n\/\/Add the header row.\n\nvar row = \\$(table\\[0\\].insertRow(-1));\n\n\/\/Add the header cells.\n\nvar headerCell = \\$(\"\\<th \/\\>\");\n\nheaderCell.html(\"CustomerId\");\n\nrow.append(headerCell);\n\nvar headerCell = \\$(\"\\<th \/\\>\");\n\nheaderCell.html(\"Name\");\n\nrow.append(headerCell);\n\nvar headerCell = \\$(\"\\<th \/\\>\");\n\nheaderCell.html(\"Country\");\n\nrow.append(headerCell);\n\n\/\/Add the data rows.\n\nfor (var i = 0; i \\< customers.length; i++) {\n\n\/\/Add the data row.\n\nvar row = \\$(table\\[0\\].insertRow(-1));\n\n\/\/Add the data cells.\n\nvar cell = \\$(\"\\<td \/\\>\");\n\ncell.html(customers\\[i\\].CustomerId);\n\nrow.append(cell);\n\ncell = \\$(\"\\<td \/\\>\");\n\ncell.html(customers\\[i\\].Name);\n\nrow.append(cell);\n\ncell = \\$(\"\\<td \/\\>\");\n\ncell.html(customers\\[i\\].Country);\n\nrow.append(cell);\n\n}\n\nvar dvTable = \\$(\"\\#dvCustomersGrid\");\n\ndvTable.html(\"\");\n\ndvTable.append(table);\n\n});\n\n});\n\n\\<\/script\\>\n\n**Screenshot**\n\n![Populate Table from API using jQuery](https:\/\/www.aspsnippets.com\/Handlers\/DownloadFile.ashx?File=a966555c-a8c1-4af9-88bc-b1bc2ab12ddf.png)\n\n**Browser Compatibility**\n\nThe above code has been tested in the following browsers. ![Internet Explorer]() ![FireFox]() ![Chrome]() ![Safari]() ![Opera]()\n\n\\* All browser logos displayed above are property of their respective owners.\n\n**Demo**\n\n**Downloads**","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

5 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.2 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://www.aspsnippets.com/Articles/3658/Populate-Table-from-API-using-jQuery/
Last Crawled	2026-04-04 18:46:01 (5 days ago)
First Indexed	2023-11-23 01:24:30 (2 years ago)
HTTP Status Code	200
Meta Title	Populate Table from API using jQuery
Meta Description	explained with an example, how to populate HTML Table from external API using jQuery.
Meta Canonical	null
Boilerpipe Text	In this article I will explain with an example, how to populate HTML Table from external API using jQuery . ASPSnippets Test API The following API will be used in this article. The API returns the following JSON. [ { "CustomerId":1, "Name":"John Hammond", "Country":"United States" }, { "CustomerId":2, "Name":"Mudassar Khan", "Country":"India" }, { "CustomerId":3, "Name":"Suzanne Mathews", "Country":"France" }, { "CustomerId":4, "Name":"Robert Schidner", "Country":"Russia" } ] HTML Markup The following HTML Markup consists of an HTML DIV element. < h4 > Customers </ h4 > < hr /> < div id ="dvCustomersGrid"></ div > Populating HTML Table from API using jQuery Inside the jQuery document ready event handler, the API URL is called using the jQuery get function. Inside the jQuery get success event, the received response is converted to JavaScript Array using the JSON.parse JavaScript function and set in the customers variable. Adding the Header Row The Header Row will be built using Table TH element and appended using jQuery . Adding the Data Rows A loop is executed over the Array elements and one by one a Row is created in the HTML Table. Table insertRow Method : This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position. Then inside each Row, a dynamic Cell element is created and appended using jQuery . Adding the dynamic Table to the Page Finally, the dynamically created table is added to the page by appending it to the HTML DIV using the append method. Note : You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place. < script type ="text/javascript" src ="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></ script > < script type ="text/javascript"> $( function () { $.get( "https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json" , function (data, status) { var customers = JSON.parse(data); //Create a HTML Table element. var table = $( "<table />" ); table[0].border = "1" ; //Add the header row. var row = $(table[0].insertRow(-1)); //Add the header cells. var headerCell = $( "<th />" ); headerCell.html( "CustomerId" ); row.append(headerCell); var headerCell = $( "<th />" ); headerCell.html( "Name" ); row.append(headerCell); var headerCell = $( "<th />" ); headerCell.html( "Country" ); row.append(headerCell); //Add the data rows. for ( var i = 0; i < customers.length; i++) { //Add the data row. var row = $(table[0].insertRow(-1)); //Add the data cells. var cell = $( "<td />" ); cell.html(customers[i].CustomerId); row.append(cell); cell = $( "<td />" ); cell.html(customers[i].Name); row.append(cell); cell = $( "<td />" ); cell.html(customers[i].Country); row.append(cell); } var dvTable = $( "#dvCustomersGrid" ); dvTable.html( "" ); dvTable.append(table); }); }); </ script > Screenshot Browser Compatibility The above code has been tested in the following browsers. * All browser logos displayed above are property of their respective owners. Demo Downloads
Markdown	[![logo](https://www.aspsnippets.com/assets/img/logo_ns.webp)](https://www.aspsnippets.com/) حضرت خواجہ سیدنا معین الدین حسن چشتی سنجاری اجمیری رحمۃ اللہ علیہ [![logo](https://www.aspsnippets.com/assets/img/logo_ns.webp)](https://www.aspsnippets.com/) - [HOME](https://www.aspsnippets.com/) - [BLOGS](https://www.aspsnippets.com/articles/all) - [ASP.Net](https://www.aspsnippets.com/Categories/ASP.Net/) [C\#.Net](https://www.aspsnippets.com/Categories/C.Net/) [JavaScript](https://www.aspsnippets.com/Categories/JavaScript/) [ADO.Net](https://www.aspsnippets.com/Categories/ADO.Net/) [Excel](https://www.aspsnippets.com/Categories/Excel/) [AJAX](https://www.aspsnippets.com/Categories/AJAX/) [VB.Net](https://www.aspsnippets.com/Categories/VB.Net/) [SQL Server](https://www.aspsnippets.com/Categories/SQL-Server/) [GridView](https://www.aspsnippets.com/Categories/GridView/) [Issues and Exceptions](https://www.aspsnippets.com/Categories/Issues-and-Exceptions/) [Silverlight](https://www.aspsnippets.com/Categories/Silverlight/) [Rich Text Editor](https://www.aspsnippets.com/Categories/Rich-Text-Editor/) [jQuery](https://www.aspsnippets.com/Categories/jQuery/) [DataList](https://www.aspsnippets.com/Categories/DataList/) [Snippets](https://www.aspsnippets.com/Categories/Snippets/) [XML](https://www.aspsnippets.com/Categories/XML/) [New Features](https://www.aspsnippets.com/Categories/New-Features/) [.Net 4.0](https://www.aspsnippets.com/Categories/.Net-4.0/) [TreeView](https://www.aspsnippets.com/Categories/TreeView/) [AJAX Control Toolkit](https://www.aspsnippets.com/Categories/AJAX-Control-Toolkit/) [jQuery Plugins](https://www.aspsnippets.com/Categories/jQuery-Plugins/) [Third Party Controls](https://www.aspsnippets.com/Categories/Third-Party-Controls/) [ASP.Net Validators](https://www.aspsnippets.com/Categories/ASP.Net-Validators/) [WCF](https://www.aspsnippets.com/Categories/WCF/) [Repeater](https://www.aspsnippets.com/Categories/Repeater/) [Regular Expressions](https://www.aspsnippets.com/Categories/Regular-Expressions/) [Yahoo API](https://www.aspsnippets.com/Categories/Yahoo-API/) [iTextSharp](https://www.aspsnippets.com/Categories/iTextSharp/) [FaceBook](https://www.aspsnippets.com/Categories/FaceBook/) [Charts](https://www.aspsnippets.com/Categories/Charts/) [ListView](https://www.aspsnippets.com/Categories/ListView/) [Tweeter](https://www.aspsnippets.com/Categories/Tweeter/) [Google](https://www.aspsnippets.com/Categories/Google/) [CSS](https://www.aspsnippets.com/Categories/CSS/) [SMS](https://www.aspsnippets.com/Categories/SMS/) [DotNetZip](https://www.aspsnippets.com/Categories/DotNetZip/) [Crystal Reports](https://www.aspsnippets.com/Categories/Crystal-Reports/) [Entity Framework](https://www.aspsnippets.com/Categories/Entity-Framework/) [HyperLink](https://www.aspsnippets.com/Categories/HyperLink/) [RDLC Report](https://www.aspsnippets.com/Categories/RDLC-Report/) [SqlDataSource](https://www.aspsnippets.com/Categories/SqlDataSource/) [Menu](https://www.aspsnippets.com/Categories/Menu/) [YouTube](https://www.aspsnippets.com/Categories/YouTube/) [Twitter](https://www.aspsnippets.com/Categories/Twitter/) [HTML](https://www.aspsnippets.com/Categories/HTML/) [XmlDataSource](https://www.aspsnippets.com/Categories/XmlDataSource/) [ListBox](https://www.aspsnippets.com/Categories/ListBox/) [Tips](https://www.aspsnippets.com/Categories/Tips/) [DataGridView](https://www.aspsnippets.com/Categories/DataGridView/) [Cryptography](https://www.aspsnippets.com/Categories/Cryptography/) [Windows Forms](https://www.aspsnippets.com/Categories/Windows-Forms/) [LinkedIn](https://www.aspsnippets.com/Categories/LinkedIn/) [WebUserControl](https://www.aspsnippets.com/Categories/WebUserControl/) [RSS Feeds](https://www.aspsnippets.com/Categories/RSS-Feeds/) [HTML5](https://www.aspsnippets.com/Categories/HTML5/) [Sitemap](https://www.aspsnippets.com/Categories/Sitemap/) [IIS](https://www.aspsnippets.com/Categories/IIS/) [LINQ](https://www.aspsnippets.com/Categories/LINQ/) [DataPager](https://www.aspsnippets.com/Categories/DataPager/) [URL Routing](https://www.aspsnippets.com/Categories/URL-Routing/) [SqlBulkCopy](https://www.aspsnippets.com/Categories/SqlBulkCopy/) [OCR](https://www.aspsnippets.com/Categories/OCR/) [ASP.Net 4.5](https://www.aspsnippets.com/Categories/ASPNet-45/) [Master Pages](https://www.aspsnippets.com/Categories/Master-Pages/) [MySQL](https://www.aspsnippets.com/Categories/MySQL/) [CSV](https://www.aspsnippets.com/Categories/CSV/) [Stored Procedures](https://www.aspsnippets.com/Categories/Stored-Procedures/) [JSON](https://www.aspsnippets.com/Categories/JSON/) [Web Services](https://www.aspsnippets.com/Categories/Web-Services/) [Bootstrap](https://www.aspsnippets.com/Categories/Bootstrap/) [Windows Service](https://www.aspsnippets.com/Categories/Windows-Service/) [DataTable](https://www.aspsnippets.com/Categories/DataTable/) [App.Config](https://www.aspsnippets.com/Categories/AppConfig/) [Visual Studio](https://www.aspsnippets.com/Categories/Visual-Studio/) [RadioButton](https://www.aspsnippets.com/Categories/RadioButton/) [CheckBox](https://www.aspsnippets.com/Categories/CheckBox/) [Generic Handler](https://www.aspsnippets.com/Categories/Generic-Handler/) [DropDownList](https://www.aspsnippets.com/Categories/DropDownList/) [FileUpload](https://www.aspsnippets.com/Categories/FileUpload/) [RadioButtonList](https://www.aspsnippets.com/Categories/RadioButtonList/) [CheckBoxList](https://www.aspsnippets.com/Categories/CheckBoxList/) [Flash](https://www.aspsnippets.com/Categories/Flash/) [HtmlEditorExtender](https://www.aspsnippets.com/Categories/HtmlEditorExtender/) [Div](https://www.aspsnippets.com/Categories/Div/) [Table](https://www.aspsnippets.com/Categories/Table/) [AngularJS](https://www.aspsnippets.com/Categories/AngularJS/) [DataReader](https://www.aspsnippets.com/Categories/DataReader/) [DataSet](https://www.aspsnippets.com/Categories/DataSet/) [Console Applications](https://www.aspsnippets.com/Categories/Console-Applications/) [FTP](https://www.aspsnippets.com/Categories/FTP/) [DetailsView](https://www.aspsnippets.com/Categories/DetailsView/) [Password TextBox](https://www.aspsnippets.com/Categories/Password-TextBox/) [Enum](https://www.aspsnippets.com/Categories/Enum/) [ComboBox](https://www.aspsnippets.com/Categories/ComboBox/) [Sponsored](https://www.aspsnippets.com/Categories/Sponsored/) [SqlDataAdapter](https://www.aspsnippets.com/Categories/SqlDataAdapter/) [OpenXml](https://www.aspsnippets.com/Categories/OpenXml/) [ClosedXml](https://www.aspsnippets.com/Categories/ClosedXml/) [SiteMapPath](https://www.aspsnippets.com/Categories/SiteMapPath/) [Arrays](https://www.aspsnippets.com/Categories/Arrays/) [FormView](https://www.aspsnippets.com/Categories/FormView/) - [FORUMS](https://www.aspsnippets.com/Articles/3658/Populate-Table-from-API-using-jQuery/) - [Questions](https://www.aspsnippets.com/questions/all) - [Ask Question](https://www.aspsnippets.com/questions/ask) - [VIDEOS](https://www.aspsnippets.com/videos/all) - [![](https://www.aspsnippets.com/images/ai_new.png)]() - [SEARCH]() - [INTERVIEW](https://www.aspsnippets.com/Articles/3658/Populate-Table-from-API-using-jQuery/) - [Interview Questions](https://www.aspsnippets.com/interviewquestions/all) - [COMMUNITY](https://www.aspsnippets.com/Articles/3658/Populate-Table-from-API-using-jQuery/) - [Users](https://www.aspsnippets.com/users/all/) - [CONTACT](https://www.aspsnippets.com/contact/) - ![Click to Login.](https://www.aspsnippets.com/assets/img/login_btn.png) Search Ask Question [![Image](https://www.aspsnippets.com/assets/img/logo_ns.webp)](https://www.aspsnippets.com/) ### Company - [About us](https://www.aspsnippets.com/Articles/3658/Populate-Table-from-API-using-jQuery/) - [Contact us](https://www.aspsnippets.com/contact/) ### Explore - [Ask question](https://www.aspsnippets.com/questions/ask) - [FAQs]() - [Privacy policy](https://www.aspsnippets.com/PrivacyPolicy) ### Follow us - [Facebook](https://www.facebook.com/ASPSnippets/) - [Instagram](https://www.instagram.com/ASPSnippets/) - [YouTube](https://youtube.com/ASPSnippetsChannel) - [Twitter](https://www.twitter.com/ASPSnippets) ### Contact Us - Email: [webmaster@aspsnippets.com](mailto:webmaster@aspsnippets.com) - Address: ASPSNIPPETS PRIVATE LIMITED G-110, SHAGUN ARCADE, MALAD (EAST), MUMBAI, MAHARASHTRA, INDIA 400097. © COPYRIGHT 2026 [ASPSnippets.com](https://www.aspsnippets.com/) ALL RIGHTS RESERVED. Disclaimer This site makes use of Cookies. Please refer [Privacy Policy](https://www.aspsnippets.com/PrivacyPolicy) for more details. *** [Allow]() [Reject]()
Readable Markdown	In this article I will explain with an example, how to populate HTML Table from external API using [jQuery](https://www.aspsnippets.com/Categories/jQuery.aspx). ASPSnippets Test API The following API will be used in this article. The API returns the following JSON. \[ { "CustomerId":1, "Name":"John Hammond", "Country":"United States" }, { "CustomerId":2, "Name":"Mudassar Khan", "Country":"India" }, { "CustomerId":3, "Name":"Suzanne Mathews", "Country":"France" }, { "CustomerId":4, "Name":"Robert Schidner", "Country":"Russia" } \] HTML Markup The following HTML Markup consists of an HTML DIV element. \<h4\>Customers\</h4\> \<hr/\> \<div id\="dvCustomersGrid"\>\</div\> Populating HTML Table from API using jQuery Inside the [jQuery](https://www.aspsnippets.com/Categories/jQuery.aspx) document ready event handler, the API URL is called using the [jQuery](https://www.aspsnippets.com/Categories/jQuery.aspx) get function. Inside the [jQuery](https://www.aspsnippets.com/Categories/jQuery.aspx) get success event, the received response is converted to JavaScript Array using the JSON.parse JavaScript function and set in the customers variable. Adding the Header Row The Header Row will be built using Table TH element and appended using [jQuery](https://www.aspsnippets.com/Categories/jQuery.aspx). Adding the Data Rows A loop is executed over the Array elements and one by one a Row is created in the HTML Table. Table insertRow Method : This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position. Then inside each Row, a dynamic Cell element is created and appended using [jQuery](https://www.aspsnippets.com/Categories/jQuery.aspx). Adding the dynamic Table to the Page Finally, the dynamically created table is added to the page by appending it to the HTML DIV using the append method. Note: You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place. \<script type\="text/javascript" src\="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"\>\</script\> \<script type\="text/javascript"\> \$(function () { \$.get("https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json", function (data, status) { var customers = JSON.parse(data); //Create a HTML Table element. var table = \$("\<table /\>"); table\[0\].border = "1"; //Add the header row. var row = \$(table\[0\].insertRow(-1)); //Add the header cells. var headerCell = \$("\<th /\>"); headerCell.html("CustomerId"); row.append(headerCell); var headerCell = \$("\<th /\>"); headerCell.html("Name"); row.append(headerCell); var headerCell = \$("\<th /\>"); headerCell.html("Country"); row.append(headerCell); //Add the data rows. for (var i = 0; i \< customers.length; i++) { //Add the data row. var row = \$(table\[0\].insertRow(-1)); //Add the data cells. var cell = \$("\<td /\>"); cell.html(customers\[i\].CustomerId); row.append(cell); cell = \$("\<td /\>"); cell.html(customers\[i\].Name); row.append(cell); cell = \$("\<td /\>"); cell.html(customers\[i\].Country); row.append(cell); } var dvTable = \$("\#dvCustomersGrid"); dvTable.html(""); dvTable.append(table); }); }); \</script\> Screenshot ![Populate Table from API using jQuery](https://www.aspsnippets.com/Handlers/DownloadFile.ashx?File=a966555c-a8c1-4af9-88bc-b1bc2ab12ddf.png) Browser Compatibility The above code has been tested in the following browsers. ![Internet Explorer]() ![FireFox]() ![Chrome]() ![Safari]() ![Opera]() \* All browser logos displayed above are property of their respective owners. Demo Downloads
Shard	173 (laksa)
Root Hash	15149566428044961973
Unparsed URL	com,aspsnippets!www,/Articles/3658/Populate-Table-from-API-using-jQuery/ s443