what can I do to fix my jQuery without any hard-coding in my HTML?

November 14, 2021

When I checked my work I see undefined in my work. It’s not supposed to be there. Can anyone help?

jQuery

    $(document).ready(function () {
    var listItems = $("#productList li");
    listItems.each(function (idx, li) {
        var product = $(li);
        product.append(" - <b> ("+product.attr('data-type')+") </b>");
    });
  });

HTML

                    <ul id="productList">
                    <li data-activity-type="family">Snow Tubbing</li>
                    <li data-activity-type="family">Snowcat Mountain Tour</li>
                    <li data-activity-type="adventure">SnowSlam 11 Racing Course</li>
                    <li data-activity-type="adventure">Snowboarding</li>
                    <li data-activity-type="adventure">Edge 11 Performance Ski Racing</li>
                    <li data-activity-type="family">Dog Sled Tour</li>
                    <li data-activity-type="family">Snowshoeing</li>
                    <li data-activity-type="kids">Kid's Night Out</li>
                    <li data-activity-type="kids">Bear Cub Kamp at the Nursery</li>
              </ul>

>Solution :

I’m assuming the activity-type value is going to append to innerHTML.
the data-type should be data-activity-type.

 $(document).ready(function () {
    var listItems = $("#productList li");
    listItems.each((index, item) => {
      item = $(item);
      item.html( item.html() + `- <b>${ item.attr('data-activity-type') }</b>` );
    });
  });