时间戳

首页 > 解决方案 > JavaScript 将对象中的数据链接到 HTML 元素

javascript - JavaScript 将对象中的数据链接到 HTML 元素

问题描述

我有一个 JavaScript 练习，我试图在单击特定链接后显示一个包含数据的表格。这实际上是一个 3 部分的练习。2部分完成。只有我不能做的部分是桌子部分。这是一个下拉选择菜单，用户可以在其中选择一个类别。一旦选择了类别，就会出现该类别中的业务。每个业务都是一个li标签和锚链接。单击业务链接后，它会跳转到页面并显示包含该特定业务信息的表格。用数据显示表格是我的问题。有人可以在不更改我已有的代码的情况下帮助我。

var businessListings = {
    hair: {
      "Tina's Hair Salon": {
        Address: "1520 Lakeview Drive Chester, Pa 19013",
        PhoneNumber: "610-872-1109",
        Website: "www.tinahair.com",
        Specialty: "All hair types"
      }, // line ends Tina Hair Salon info
      "Dollhouse Hair Studio": {
        Address: "485 4th Street Chester, Pa 19013",
        PhoneNumber: "484-419-8595",
        Website: "www.dhhairstudio.com",
        Specialty: "Braiding, All hair types"
      } // line ends dollhouse info
    }, // line ends hair category
    healBeauty: {
      Myra 's Make-Up Kit": {
      Address: "4260 Jeffrey Lane Chester, Pa 19013",
      PhoneNumber: "610-848-2014",
      Website: "www.mymakeupkit.com",
      Specialty: "Make all skin tones, ages, events"
    }, // line ends Myra's makeup info
    "Purity Spa": {
      Address: "213 W. 24th Street Chester, Pa 19013",
      PhoneNumber: "267-608-4752",
      Website: "www.purityspa.com",
      Specialty: "Universal"
    } // line ends Purity spa info
  }, // line ends healBeauty category
  food: {
    "Larry's Pies": {
      Address: "250 3rd Street Chester, Pa 19013",
      PhoneNumber: "610-724-2008",
      Website: "N/A",
      Specialty: "Pies, Desserts"
    }, // line ends Larry's Pies info
    "C-Pride Super Market": {
      Address: "3018 W. 7th Street Chester, Pa 19013",
      PhoneNumber: "610-803-2020",
      Website: "www.cpridemarket.com",
      Specialty: "All Foods, Groceries"
    } // line ends C-Pride Market info
  }, // line ends food category
  travel: {
    "G&W Travel Agency": {
      Address: "200 Avenue of States Chester, Pa 19013",
      PhoneNumber: "484-203-8587",
      Website: "www.gandwtravel.com",
      Specialty: "Traveling, All Occasions"
    }, // line ends G&W Travel info
    "Grant Travel Agency": {
      Address: "1834 Edward Street Chester, Pa 19013",
      PhoneNumber: "267-515-7062",
      Website: "N/A",
      Specialty: "Traveling, All Occasions"
    } // line ends Grant Travel info
  }, // line ends travel category
  fitness: {
    "Elijah's Supreme Gym": {
      Address: "420 Tilghman Street Chester, Pa 19013",
      PhoneNumber: "610-898-5040",
      Website: "www.esupremegym.com",
      Specialty: "Fitness, All Body Types"
    }, // line ends Elijah's Gym info
    "Fitness Girl Gym": {
      Address: "2790 E. 15th Street Chester, Pa 19013",
      PhoneNumber: "267-762-8240",
      Website: "www.esupremegym.com",
      Specialty: "Fitness, All Body Types"
    } // line ends Fitness Gym info
  },
  retCloth: {
    "Enid and 4 Girls Boutique": {
      Address: "2200 Edgmont Avenue Chester, Pa 19013",
      PhoneNumber: "610-203-8570",
      Website: "www.enidand4girls.com",
      Specialty: "Clothing, Accessories"
    }, // line ends Enid and 4 Girls info
    "Fatima & Iman's Closet": {
      Address: "824 Parker Street Chester, Pa 19013",
      PhoneNumber: "610-800-1937",
      Website: "www.fatimaandiman.com",
      Specialty: "Clothing, Accessories"
    } // line ends Enid and 4 Girls info
  }, // line ends retCloth info
  auto: {
    "Arthur's": {
      Address: "1019 Edgmont Avenue Chester, Pa 19013",
      PhoneNumber: "484-626-1149",
      Website: "N/A",
      Specialty: "All Vehicle Issues"
    }, // line ends Arthur's info
    "Johnson and Son Mechanics": {
      Address: "517 Pennell Street Chester, Pa 19013",
      PhoneNumber: "610-504-8127",
      Website: "www.johnsonandsons.com",
      Specialty: "Auto Body Work"
    } // line ends Johnson and Sons info
  }, // line ends auto info
  homeDec: {
    "Charisma Home Decor": {
      Address: "7790 Melrose Avenue Chester, Pa 19013",
      PhoneNumber: "610-203-9045",
      Website: "www.charismahomedecor.com",
      Specialty: "Handcrafted Home Decor, Elegant Home Decor, All Styles"
    }, // line ends Charisma Home Decor info
    "Lily's Home Decor": {
      Address: "1402 Ward Road Chester, Pa 19013",
      PhoneNumber: "267-761-2990",
      Website: "www.lilydesign.com",
      Specialty: "All Styles"
    } // line ends Lily Home Decor info
  }, // line ends homeDec info
  photo: {
    "Marple Photography": {
      Address: "618 Taylor Avenue Chester, Pa 19013",
      PhoneNumber: "610-499-8615",
      Website: "www.marplephotography.com",
      Specialty: "All Styles, Occasions"
    }, // line ends Marple Photography info
    "Kyle's Photography": {
      Address: "216 W. 9th Street Chester, Pa 19013",
      PhoneNumber: "484-223-7831",
      Website: "N/A",
      Specialty: "Professional Shoots, All Styles, Occasions"
    } // line ends Kyle's Photography info
  }, // line ends photo info
  musEnt: {
    "Mark's Studios": {
      Address: "2407 Linden Street Chester, Pa 19013",
      PhoneNumber: "267-808-4256",
      Website: "www.markstudios.com",
      Specialty: "R&B, Hip Hop"
    }, // line ends Mark's Studios info
    "CC Moore Recording Studio": {
      Address: "1420 Melrose Avenue Chester, Pa 19013",
      PhoneNumber: "267-615-2009",
      Website: "www.ccmoorestudio.com",
      Specialty: "All Genres"
    } // line ends CC Moore Recording info
  }, // line ends musEnt category paint: {
  "Ulysses's Paint": {
    Address: "2201 Edgmont Avenue Chester Pa 19013",
    PhoneNumber: "267-298-0845",
    Website: "www.ulyssespaint.com",
    Specialty: "Mixing Paint, Selling All Paint Types"
  }, // line ends Ulysses's Paint info
  "Dock Paint Supplies": {
    Address: "1007 W. 7th Street Chester, Pa 19013",
    PhoneNumber: "484-318-5190",
    Website: "N/A",
    Specialty: "All Paint Type Supplies"
  } // line ends Mark's Studios info
}, // line ends paint category info
}; // line ends "multi-dimensional" array object

var businessListNames = [];
var selectedCategory;
var textNameOfBusinessSelected;
var nameOfBusinessesUnderCategory;

function businessListingResults(databaseList) {
  // function is for when a category is selected
  selectedCategory = $("#select-business-listing option:selected").val();
  textNameOfBusinessSelected = $("#select-business-listing 
      option: selected ").text();
      nameOfBusinessesUnderCategory = databaseList[selectedCategory];
      for (findBusinessUnderCategory in nameOfBusinessesUnderCategory) {
        businessListNames.push(findBusinessUnderCategory);
        console.log(findBusinessUnderCategory);
      } // line ends for in loop
      console.log("ice cream"); $("#listingResults").html("Business Listings Under Category <strong>" +
        textNameOfBusinessSelected + "</strong> are: <br/><br/><ul 
        id = 'listOfBusinesses' > < li > < a href = 'javascript-exercise-16.html#bottomOfPage'
        onclick = 'clickListingLink()' > " + businessListNames.join(" < br / > < a href = 'javascript-exercise-16.html#bottomOfPage'
        onclick = 'clickListingLink()' >
        <
        li > ") + " < /li></ul > ");
      } // line closes function

      function clickListingLink() {
        // function is for when a link is clicked after list of businesses appear
        $('#listOfBusinesses').on('click', 'li', function() {
          clickListingLink();
          console.log('you clicked me');
          seeListingInfoTable();
          $("hr").show();
        });
      }

      function seeListingInfoTable(titleOfBusinessSelected, businessLinkSelected) {
        // function is for table that shows info of specific link clicked 
        console.log("apple");
        var tbl = "";
        tbl += '<table class="table table-hover">';
        tbl += '</table>';
        tbl += '<tbody>';
        tbl += '<caption class="listingTitle">' + titleOfBusinessSelected +
          '</caption>';
        tbl += '<tr>';
        tbl += '<th>Address</th>';
        tbl += '<th>Phone Number</th>';
        tbl += '<th>Website</th>';
        tbl += '<th>Specialty</th>';
        tbl += '</tr>';
        tbl += '<tr>';
        tbl += '<td><div class="row_data" edit_type="click" col_name="fname">' +
          businessLinkSelected["Address"] + '</div></td>';
        tbl += '<td><div class="row_data" edit_type="click" col_name="fname">' +
          businessLinkSelected["Phone Number"] + '</div></td>';
        tbl += '<td><div class="row_data" edit_type="click" col_name="fname">' +
          businessLinkSelected["Website"] + '</div></td>';
        tbl += '<td><div class="row_data" edit_type="click" col_name="fname">' +
          businessLinkSelected["Specialty"] + '</div></td>';
        tbl += '</tr>';
        tbl += '</tbody>';
        tbl += '</table>';
        $(document).find("#infoTable").html(tbl);
      } // line ends seeListingInfoTable function
<h4 class="title">Select a Category from the drop down menu to check your local businesses</h4>
<br/>
<select id="select-business-listing" name="submitted[select_your_program]" class="select-a-business">
  <option value="" selected="selected">- Select a business category -</option>
  <option value="hair">Hair</option>
  <option value="healBeauty">Health and Beauty</option>
  <option value="food">Food</option>
  <option value="travel">Travel</option>
  <option value="fitness">Fitness</option>
  <option value="retCloth">Retail and Clothing</option>
  <option value="auto">Automotive</option>
  <option value="homeDec">Home Decor</option>
  <option value="photo">Photography</option>
  <option value="musEnt">Music and Entertainment</option>
  <option value="paint">Paint</option>
</select>
<br/>
<br/>
<br/>
<button class="listingsBtn" onclick="businessListingResults(businessListings)">Search Listings</button>
</div>
<p id="listingResults"></p>
<br/>
<br/>
<hr/>
<br/>
<div id="bottomOfPage">
  <div id="infoTable">
  </div>

标签： javascriptjqueryhtmlarrayobject

解决方案

所以，你好：D“希望”最后一次（在这篇文章中；））。

我已经重写了你的代码，现在，它不再是你的代码了，但我认为你应该阅读 2 到 3 遍并从中学习你还不知道的部分:)。（它有点结构化）。

祝你有美好的一天，埃利亚斯 :)

// Define Database
var businessListings = {
  hair: {
    "Tina's Hair Salon": {
      Address: "1520 Lakeview Drive Chester, Pa 19013",
      PhoneNumber: "610-872-1109",
      Website: "www.tinahair.com",
      Specialty: "All hair types"
    },
    "Dollhouse Hair Studio": {
      Address: "485 4th Street Chester, Pa 19013",
      PhoneNumber: "484-419-8595",
      Website: "www.dhhairstudio.com",
      Specialty: "Braiding, All hair types"
    }
  },
  healBeauty: {
    "Myra 's Make-Up Kit": {
      Address: "4260 Jeffrey Lane Chester, Pa 19013",
      PhoneNumber: "610-848-2014",
      Website: "www.mymakeupkit.com",
      Specialty: "Make all skin tones, ages, events"
    },
    "Purity Spa": {
      Address: "213 W. 24th Street Chester, Pa 19013",
      PhoneNumber: "267-608-4752",
      Website: "www.purityspa.com",
      Specialty: "Universal"
    }
  },
  food: {
    "Larry's Pies": {
      Address: "250 3rd Street Chester, Pa 19013",
      PhoneNumber: "610-724-2008",
      Website: "N/A",
      Specialty: "Pies, Desserts"
    },
    "C-Pride Super Market": {
      Address: "3018 W. 7th Street Chester, Pa 19013",
      PhoneNumber: "610-803-2020",
      Website: "www.cpridemarket.com",
      Specialty: "All Foods, Groceries"
    }
  },
  travel: {
    "G&W Travel Agency": {
      Address: "200 Avenue of States Chester, Pa 19013",
      PhoneNumber: "484-203-8587",
      Website: "www.gandwtravel.com",
      Specialty: "Traveling, All Occasions"
    },
    "Grant Travel Agency": {
      Address: "1834 Edward Street Chester, Pa 19013",
      PhoneNumber: "267-515-7062",
      Website: "N/A",
      Specialty: "Traveling, All Occasions"
    }
  },
  fitness: {
    "Elijah's Supreme Gym": {
      Address: "420 Tilghman Street Chester, Pa 19013",
      PhoneNumber: "610-898-5040",
      Website: "www.esupremegym.com",
      Specialty: "Fitness, All Body Types"
    },
    "Fitness Girl Gym": {
      Address: "2790 E. 15th Street Chester, Pa 19013",
      PhoneNumber: "267-762-8240",
      Website: "www.esupremegym.com",
      Specialty: "Fitness, All Body Types"
    }
  },
  retCloth: {
    "Enid and 4 Girls Boutique": {
      Address: "2200 Edgmont Avenue Chester, Pa 19013",
      PhoneNumber: "610-203-8570",
      Website: "www.enidand4girls.com",
      Specialty: "Clothing, Accessories"
    },
    "Fatima & Iman's Closet": {
      Address: "824 Parker Street Chester, Pa 19013",
      PhoneNumber: "610-800-1937",
      Website: "www.fatimaandiman.com",
      Specialty: "Clothing, Accessories"
    }
  },
  auto: {
    "Arthur's": {
      Address: "1019 Edgmont Avenue Chester, Pa 19013",
      PhoneNumber: "484-626-1149",
      Website: "N/A",
      Specialty: "All Vehicle Issues"
    },
    "Johnson and Son Mechanics": {
      Address: "517 Pennell Street Chester, Pa 19013",
      PhoneNumber: "610-504-8127",
      Website: "www.johnsonandsons.com",
      Specialty: "Auto Body Work"
    }
  },
  homeDec: {
    "Charisma Home Decor": {
      Address: "7790 Melrose Avenue Chester, Pa 19013",
      PhoneNumber: "610-203-9045",
      Website: "www.charismahomedecor.com",
      Specialty: "Handcrafted Home Decor, Elegant Home Decor, All Styles"
    },
    "Lily's Home Decor": {
      Address: "1402 Ward Road Chester, Pa 19013",
      PhoneNumber: "267-761-2990",
      Website: "www.lilydesign.com",
      Specialty: "All Styles"
    }
  },
  photo: {
    "Marple Photography": {
      Address: "618 Taylor Avenue Chester, Pa 19013",
      PhoneNumber: "610-499-8615",
      Website: "www.marplephotography.com",
      Specialty: "All Styles, Occasions"
    },
    "Kyle's Photography": {
      Address: "216 W. 9th Street Chester, Pa 19013",
      PhoneNumber: "484-223-7831",
      Website: "N/A",
      Specialty: "Professional Shoots, All Styles, Occasions"
    }
  },
  musEnt: {
    "Mark's Studios": {
      Address: "2407 Linden Street Chester, Pa 19013",
      PhoneNumber: "267-808-4256",
      Website: "www.markstudios.com",
      Specialty: "R&B, Hip Hop"
    },
    "CC Moore Recording Studio": {
      Address: "1420 Melrose Avenue Chester, Pa 19013",
      PhoneNumber: "267-615-2009",
      Website: "www.ccmoorestudio.com",
      Specialty: "All Genres"
    }
  },
  paint: {
    "Ulysses's Paint": {
      Address: "2201 Edgmont Avenue Chester Pa 19013",
      PhoneNumber: "267-298-0845",
      Website: "www.ulyssespaint.com",
      Specialty: "Mixing Paint, Selling All Paint Types"
    },
    "Dock Paint Supplies": {
      Address: "1007 W. 7th Street Chester, Pa 19013",
      PhoneNumber: "484-318-5190",
      Website: "N/A",
      Specialty: "All Paint Type Supplies"
    }
  }
}

// Add change event listener to the select
$("#businessListing_select").change(() => {
  getDataBaseEntries($("#businessListing_select option:selected").val(), businessListings);
});

function getDataBaseEntries(category, dataBase) {
  Object.keys(dataBase[category]).forEach(listing => {
    // Create A paragraph
    let paragraph = document.createElement("p");
    // Set the text
    paragraph.innerText = listing;
    paragraph.style.textDecoration = "underline";
    // Add click event listener
    paragraph.addEventListener("click", function() { 
        // Clear the old html
        $("#infoTable").html("");
        // store the information in a variable
        let information = dataBase[category][listing];
        // `` == multiline string :) In a multiline string you can use "${}" to execute code
        $("#infoTable").html
        (`
          <table cellspacing="0" cellpadding="5">
            <thead>
              <th>Address</th>
              <th>Phone Number</th>
              <th>Website</th>
              <th>Specialty</th>
            </thead>
            <tbody>
              <tr>
                <td>${information.Address}</td>
                <td>${information.PhoneNumber}</td>
                <td>${information.Specialty}</td>
                <td>${information.Website}</td>
              </tr>
            </tbody>
          </table>
        `);
      });
    // Append the paragraph
    $("#listingResults").append(paragraph);
  })
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    table,th,td {
        border: 1px solid black;
    }
</style>
<h4 class="title">Select a Category from the drop down menu to check your local businesses</h4>
<br>
<select id="businessListing_select" class="select-a-business">
    <option value="" selected="selected">- Select a business category -</option>
    <option value="hair">Hair</option>
    <option value="healBeauty">Health and Beauty</option>
    <option value="food">Food</option>
    <option value="travel">Travel</option>
    <option value="fitness">Fitness</option>
    <option value="retCloth">Retail and Clothing</option>
    <option value="auto">Automotive</option>
    <option value="homeDec">Home Decor</option>
    <option value="photo">Photography</option>
    <option value="musEnt">Music and Entertainment</option>
    <option value="paint">Paint</option>
</select>
<br>
<br>
<br>
<p id="listingResults"></p>
<br>
<br>
<hr>
<br>
<div id="bottomOfPage">
    <div id="infoTable"></div>
</div>
<script src="./index.js"></script>

推荐阅读