Как сделать вывод информации не строкой, а списком?

Question

[Алексей]

Как наладить вывод информации не строкой, а списком? И если такое вообще возможно, выводить значения в виде кнопки, на которую просто можно нажать.

function select_company()
{
  var chbx_list = collect_checkboxes();
  var amount = chbx_list.length;
  console.log(chbx_list);
  csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
  $.ajax({
      url : "/blockchain/", // the endpoint убрать первыйс слуеш в случае неудачи
      type : "POST", // http method
      data : {chbx_amount : amount,
              checks_list : chbx_list,
              csrfmiddlewaretoken: csrf_token }, // data sent with the post request

              success : function(json) {
                    // console.log(json);
                document.getElementById('companies').innerHTML = json.companies.join(', ');            

                  },

                  // handle a non-successful response
                  error : function(xhr,errmsg,err) {
                    console.log("error");
                  }
      });
      return false;
}

Answer 1

[Артём Лукичев]

let lisString = "";
for (const company of json.companies) {
    const li = `<li>${company}</li>`;
    lisString+=li;
}
document.getElementById("companies").innerHTML = lisString;

Примерно такой код надо вставить в success. Только учтите, что необходимо элемент с id companies сделать ul. Проверьте такой вариант. Он должен работать если тот код, который есть сейчас работает исправно

Comments

[Алексей]

Да, тот код, что я приложил рабочий
Вывод осуществляется в это поле, не совсем понял, что здесь нужно поменять

<div class="leadOut">
  <p>Подходящие компании</p>
   <div id="companies"> </div>
</div>

[Артём Лукичев]

<div class="leadOut">
  <p>Подходящие компании</p>
   <ul id="companies"> </ul>
</div>

div на ul чтобы элементы в список нормально вывелись. Ну или уже внутри companies сделать ul и в него выводить li

[Алексей]

Артём, спасибо, решение подошло !

Answer 2

[Simkav]

Получаете жсон, парсите его как массив, проходом создаете li через document.createElement, после чего их все апендите в список.

Comments

[Алексей]

В том то и прикол, я понимаю как это делается, но не могу сделать

[Simkav]

Алексей, Ну покажите что не получается, или объясните где застряли