var arr = [ \n { name: 'Ravi', age: 20 },\n { name: 'Ajay', age: 55 },\n { name: 'Henry', age: 15 }\n];<\/code><\/pre>\n\n\n\nLet’s say an API is returning an array of objects as shown in the example above. How would you loop and present the data in UI?<\/p>\n\n\n\n
Looping Array of Object:<\/strong><\/p>\n\n\n\nIn order to display data in UI, you have to loop through each object (element) and display the property value. Since it is an array, you can use forEach()<\/code><\/strong> array method to loop through. <\/p>\n\n\n\narr.forEach(function(element){\n \/\/ element is object here. \n console.log(element.name, element.age);\n})\n\/\/ Output:\nRavi 20\nAjay 55\nHenry 15<\/code><\/pre>\n\n\n\nIn the above example, we are passing a function in as an argument in the forEach()<\/code><\/strong> function. Such functions are know as callbacks <\/strong>in JavaScript. <\/p>\n\n\n\nYou can learn more about callbacks in this article: What is Callback in JavaScript <\/a><\/p>\n\n\n\n The dot (.)<\/code><\/strong> operator is used to access object property values. Apart from element <\/strong>argument, the callback accepts second optional argument which provides the index <\/strong>of each element in the array. <\/p>\n\n\n\narr.forEach(function(element, index){\n \/\/ element is object here. \n console.log(index, element.name, element.age);\n})\n\/\/ Output:\n0 Ravi 20\n1 Ajay 55\n2 Henry 15<\/code><\/pre>\n\n\n\nNow, let’s try to display the data in a tabular form in UI using jQuery.<\/p>\n\n\n\n
\n<script>\n$(document).ready(function(){\n arr.forEach(function(element, index){\n index = index + 1;\n \/\/ Create row\n var row = \"<tr><td>\" \n + index + \"<\/td><td>\"\n + element.name + \"<\/td><td>\" \n + element.age + \"<\/td><\/tr>\";\n\n \/\/ Append row in table body\n $(\"#listUser tbody\").append(row);\n }) \n})\n<\/script>\n\n\/\/ Static HTML markup for table\n<table id=\"listUser\">\n <thead>\n <tr>\n <th>Sl<\/th>\n <th>Name<\/th>\n <th>Age<\/th>\n <\/tr>\n <\/thead>\n <tbody> \n <!-- Rows will be added dynamically here --> \n <\/tbody>\n<\/table><\/code><\/pre>\n\n\n\nWhat we are doing here is looping through the array of object and creating table<\/code><\/strong> rows <tr><\/code><\/strong> and adding value to <td><\/code><\/strong> dynamically. Then appending each rows in the table body<\/code><\/strong> having id = \"listUser\"<\/strong><\/code>. The loop will iterate three times as there are three elements in the array and consequently three table rows would be generated.<\/p>\n\n\n\nHere is complete example:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Table Demo<\/title>\n<style>\n table{\n width: 100%;\n margin-bottom: 20px;\n\t\tborder-collapse: collapse;\n }\n table, th, td{\n border: 1px solid #cdcdcd;\n }\n table th, table td{\n padding: 10px;\n text-align: left;\n }\n<\/style>\n<script src=\"https:\/\/code.jquery.com\/jquery-1.12.4.min.js\"><\/script>\n<script>\n $(document).ready(function(){\n var arr = [ \n { name: 'Ravi', age: 20 },\n { name: 'Ajay', age: 55 },\n { name: 'Henry', age: 15 }\n\t ];\n arr.forEach(function(element, index){\n index = index + 1;\n \/\/ Create row\n var row = \"<tr><td>\" \n + index + \"<\/td><td>\"\n + element.name + \"<\/td><td>\" \n + element.age + \"<\/td><\/tr>\";\n\n \/\/ Append row in table\n $(\"#listUser tbody\").append(row);\n }) \n }); \n<\/script>\n<\/head>\n<body>\n <table id=\"listUser\">\n <thead>\n <tr>\n <th>Sl<\/th>\n <th>Name<\/th>\n <th>Age<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <!-- Rows will be added dynamically here --> \n <\/tbody>\n <\/table>\n<\/body> \n<\/html><\/code><\/pre>\n\n\n\n Add the above code in a HTML file and open it in a browser. You would see a dynamically generated table as shown below:<\/p>\n\n\n\n![\"Handling](\"https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/08\/image-1.png\")
<\/figure>\n\n\n\nIf you found this article useful, please leave your thoughts in the comment box below.<\/p>\n\n\n\n
You may also like:
Important JavaScript Array Methods<\/a>
Sort Array of Objects by Property Value in JavaScript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"If you are working with APIs, most of the time you will encounter arrays of objects. In this article you will learn how array of objects should be handled for [ … ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[177,176,157,216,100,215],"class_list":["post-663","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-array-of-objects","tag-javascript","tag-javascript-foreach-loop","tag-jquery-loop-array-of-objects","tag-js-interview-question","tag-loop-array-of-objects","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=663"}],"version-history":[{"count":20,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/663\/revisions"}],"predecessor-version":[{"id":684,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/663\/revisions\/684"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}