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

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

注意：我添加了id一个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>

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

问题描述

解决方案

推荐阅读