如何通过属性名称分别将我的对象数组显示到我的 html 页面的 table 中

Question

Part of my JS file

My html file table where i have to display the properties

Answer 1

更新：我已将我之前的代码应用到您的 searching 函数中：

注意：我在tbody中添加了一个id：

<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>

Answer 2

假设您的对象数组是这样的：

[
  {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. 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
});

看看这个片段： 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>

如何通过属性名称分别将我的对象数组显示到我的 html 页面的 table 中

How to display my Array of Objects into my html page's table , individually, by their property name

javascript

html

frontend

javascript-objects

web-frontend

如何通过 属性 名称分别将我的对象数组显示到我的 html 页面的 table 中

How to display my Array of Objects into my html page's table , individually, by their property name

javascript

html

frontend

javascript-objects

web-frontend

如何通过属性名称分别将我的对象数组显示到我的 html 页面的 table 中