Сплит Ajax Resuls по запятой в список UL

Question

У меня есть список HTML, возвращающийся через ajax.Однако все записи разделяются запятой.Как бы я разделил каждый результат запятой и добавил бы его в / li по порядку?

HTML

   <form class="form-inline mt-2 mt-md-0">
            <input
              class="form-control mr-sm-2"
              type="text"
              name="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button id="search-btn" class="btn btn-outline-success my-2 my-sm-0" type="submit">
              Search
            </button>
  </form>

 <ul id="response">
          <li>Attack
          </li>
          <li>Defence
          </li>
          <li>Strength
          </li>
          <li>HitPoints
          </li>
 </ul>

J * Запрос

$('#search-btn').on('click', function(e) {
   e.preventDefault();
var url = "?=";
var searchValue = $('input[name="search"]').val();
var urlAddition = url + searchValue 
$.ajax({
  url: urlAddition,
  dataType: "html",
  success: function(data) {
     alert(data);
     $('ul#response').html(data);
   }
 });
});

Answer 1

Используйте .split () , чтобы разделить строку запятыми, и .map () , чтобы перебрать элементы, создать li и добавить их к ul.

const res = 'Attack, Defence, Strength, HitPoints';

const list = res.split(",");

$('#response').html(list.map(item => '<li>' + item + '</li>').join(''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="response"></ul>