How to display my Array of Objects into my html page's table , individually, by their property name
2 answers
solution1
1 ACCPTED 2020-08-08 01:58:07
Update : I have applied my earlier code to your searching function:
Note: I added an id to the tbody :
<tbody id="myTBD">
const getCafes = () => { const api = "https://raw.githubusercontent.com/debojyoti/places-fake-rest-api/master/cafes.json"; return fetch(api).then((response) => { return response.json(); }); }; var cafes = []; getCafes().then((result) => { cafes = Array.from(result.cafes); // console.log(cafes[1]); }); const getPlaces = () => { const api = "https://raw.githubusercontent.com/debojyoti/places-fake-rest-api/master/places.json"; return fetch(api).then((response) => { return response.json(); }); }; var places = []; getPlaces().then((result) => { places = Array.from(result.places); // console.log(places[1]); }); function searching() { let inp = document.getElementById("search").value; inp = inp.toUpperCase(); var myTBD = document.getElementById("myTBD"); // Clear table rows myTBD.innerHTML = ''; var result = calc(inp); for (var i in result) { // Create an empty <tr> element and add it to the end of the table: var row = myTBD.insertRow(-1); // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: var rowIndex = 0; row.insertCell(rowIndex++).innerHTML = result[i].street_no; row.insertCell(rowIndex++).innerHTML = result[i].name; row.insertCell(rowIndex++).innerHTML = result[i].locality; row.insertCell(rowIndex++).innerHTML = result[i].postal_code; row.insertCell(rowIndex++).innerHTML = result[i].lat; row.insertCell(rowIndex++).innerHTML = result[i].long; } } function calc(inp) { arr = []; for (let i = 0; i < cafes.length; i++) { if (cafes[i].name.toUpperCase().startsWith(inp) === true) { let id1 = cafes[i].location_id; // console.log('hi:'+inp); for (let j = 0; j < places.length; j++) { if (places[j].id === id1) { var obj = Object.assign({}, places[j]); obj["name"] = cafes[i].name; delete obj.id; arr.push(obj); } } } } return arr; }
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>California Cafe Directory</title> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="page.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-12" id="header-wrapper"> <div class="container"> <div class="row"> <div class="col-12" id="header"> <h2>California Cafe Directory</h2> </div> <div class="col-12" id="search-wrapper"> <input id="search" type="text" oninput="searching()" placeholder="Search your favorite cafes,"> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-12" id="table-wrapper"> <table> <thead> <tr class="table100-head"> <th class="column1">S No</th> <th class="column2">Cafe Name</th> <th class="column3">Address</th> <th class="column4">Postal Code</th> <th class="column5">Lat</th> <th class="column6">Long</th> </tr> </thead> <tbody id="myTBD"> <tr> <td class="column1">1</td> <td class="column2"><span id="col2"></span></td> <td class="column3">45250 Worth Avenue. Unit A</td> <td class="column4">201619</td> <td class="column5">36.1152</td> <td class="column6">117,521</td> </tr> <tr> <td class="column1">2</td> <td class="column2">Bazaar Cafe</td> <td class="column3">45250 Worth Avenue. Unit A</td> <td class="column4">201619</td> <td class="column5">36.1152</td> <td class="column6">117,521</td> </tr> <tr> <td class="column1">3</td> <td class="column2">Bazaar Cafe</td> <td class="column3">45250 Worth Avenue. Unit A</td> <td class="column4">201619</td> <td class="column5">36.1152</td> <td class="column6">117,521</td> </tr> <tr> <td class="column1">4</td> <td class="column2">Bazaar Cafe</td> <td class="column3">45250 Worth Avenue. Unit A</td> <td class="column4">201619</td> <td class="column5">36.1152</td> <td class="column6">117,521</td> </tr> <tr> <td class="column1">5</td> <td class="column2">Bazaar Cafe</td> <td class="column3">45250 Worth Avenue. Unit A</td> <td class="column4">201619</td> <td class="column5">36.1152</td> <td class="column6">117,521</td> </tr> <tr> <td class="column1">6</td> <td class="column2">Bazaar Cafe</td> <td class="column3">45250 Worth Avenue. Unit A</td> <td class="column4">201619</td> <td class="column5">36.1152</td> <td class="column6">117.521</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <script src="solution.js"></script> </body> </html>
solution2
0 2020-08-08 02:47:55
Assuming your array of objects is something like this:
[
{id: 1, name: 'Bazaar Coffee', address: '45250 Worth Avenue, Unit A', zip_code: 201619, latitude: 36.11512, longitude: 117.521}
...
]
You can do something like:
var table = document.getElementById('table-body')
arrayOfObj.forEach((obj)=>{
var tds = ''
// Build every <td> and append to tds string
/* for (var k in obj){
tds += `<td class='${k}'>${obj[k]}</td>\n`
} */
// If your keys are unordered you can just define all the tds in the row. See this as a template.
tds = `<td class='column-id'>${obj.id}</td>
<td class='column-name'>${obj.name}</td>
<td class='column-address'>${obj.address}</td>
<td class='column-zip_code'>${obj.zip_code}</td>
<td class='column_latitude'>${obj.latitude}</td>
<td class='column_longitude'>${obj.longitude}</td>
`
// <tr> Complete! Append to table!
var objTr = `<tr>${tds}</tr>`
table.innerHTML += objTr
});
Check out this snippet: https://jsfiddle.net/sergioxga/brtncx96/7/
// Assuming your array of objects is something like this: var arrayOfObj = [ {id: 1, name: 'Bazaar Coffee', address: '45250 Worth Avenue, Unit A', zip_code: 201619, latitude: 36.11512, longitude: 117.521}, {id: 1, name: 'Bazaar Coffee', address: '45250 Worth Avenue, Unit A', zip_code: 201619, latitude: 36.11512, longitude: 117.521}, {id: 1, name: 'Bazaar Coffee', address: '45250 Worth Avenue, Unit A', zip_code: 201619, latitude: 36.11512, longitude: 117.521} ] var table = document.getElementById('table-body') arrayOfObj.forEach((obj)=>{ var tds = '' // Build every <td> and append to tds string /* for (var k in obj){ tds += `<td class='${k}'>${obj[k]}</td>\n` } */ // If your keys are unordered you can just define all the tds in the row. You can see this as a template. tds = `<td class='column-id'>${obj.id}</td> <td class='column-name'>${obj.name}</td> <td class='column-address'>${obj.address}</td> <td class='column-zip_code'>${obj.zip_code}</td> <td class='column_latitude'>${obj.latitude}</td> <td class='column_longitude'>${obj.longitude}</td> ` // <tr> Complete. Append to table; var objTr = `<tr>${tds}</tr>` table.innerHTML += objTr });
table, th, td { border: 1px solid black; }
<table> <thead> <tr> <td>ID</td> <td>Name</td> <td>Address</td> <td>ZipCode</td> <td>Latitude</td> <td>Longitude</td> </tr> </thead> <tbody id='table-body'> </tbody> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to display a div which is a value in my array of objects and embed it into a html page
How to display objects from array into HTML table
how to display mathematical symbols in my html page
How to display JS values on my HTML page
How to use array of objects as lookup table based on property name
How to create an html table to display an array of objects with not the same fields?
How to display an array of objects on the page
How can table_name be a property in my post query?
How can get all objects whose sub object's property matches my string array using linq.js?
How can i display my json data on html page
Related Tags