jQuery отображает только последний элемент массива

Question

У меня есть проект jQuery / JavaScript, когда для получения списка результатов вам нужно перебрать массив.Я использую .html для отображения каждого результата по одному.Каждый раз в цикле предполагается показывать элемент.Таким образом, ко времени выполнения цикла все результаты будут перечислены как элементы списка.Тем не менее, цикл отображает только последний элемент массива.Я не уверен почему.

    var businessListings = {
      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 selectedCategory;
    var textNameOfBusinessCategorySelected;
    var nameOfBusinessesUnderCategory;
    function businessListingResults(databaseList) {
      selectedCategory = $("#select-business-listing option:selected").val();
      textNameOfBusinessCategorySelected = $("#select-business-listing option:selected").text();
      nameOfBusinessesUnderCategory = databaseList[selectedCategory];
      for (findBusinessNamesUnderCategory in nameOfBusinessesUnderCategory) {
           $("#listingResults").html("<li>" + findBusinessNamesUnderCategory + "</li>");
           console.log(findBusinessNamesUnderCategory);
      } // line ends for in loop
    } // line closes function

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="title">Select a Category from the drop down menu to check your local businesses</h4>
      <select id="select-business-listing" name="submitted[select_your_program]" class="select-a-business">
        <option value="musEnt">Music and Entertainment</option>
        <option value="paint">Paint</option>
      </select>
      <br/>
      <button class="listingsBtn" onclick="businessListingResults(businessListings)">Search Listings</button>
    </div>
    <p id="listingResults"></p>

Answer 1

Это был вопрос изменения метода.Мне пришлось использовать .append () вместо .html ()