Onclick конвертировать UL в JSON

Question

На моей веб-странице У меня есть область, которая суммирует несколько магазинов. Каждый магазин представляет собой список с несколькими элементами списка.

  <div id="dealersList" class="dealer-summary"> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Brecksville</li> 
       <li class="dealer-summary-listItem">8383 Chippewa Rd.,</li> 
       <li class="dealer-summary-listItem">Brecksville, Ohio - 44141</li> 
       <li class="dealer-summary-listItem">(440) 740-0535</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Dayton</li> 
       <li class="dealer-summary-listItem">3520 W Siebenthaler Ave.,</li> 
       <li class="dealer-summary-listItem">Dayton, Ohio - 45406</li> 
       <li class="dealer-summary-listItem">(937) 567-9578</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Cleveland</li> 
       <li class="dealer-summary-listItem">900 Euclid Ave.,</li> 
       <li class="dealer-summary-listItem">Cleveland, Ohio - 44115</li> 
       <li class="dealer-summary-listItem">(216) 302-3020</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Bridgetown</li> 
       <li class="dealer-summary-listItem">5830 Harrison Ave.,</li> 
       <li class="dealer-summary-listItem">Cincinnati, Ohio - 45248</li> 
       <li class="dealer-summary-listItem">(513) 574-2810</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Columbus</li> 
       <li class="dealer-summary-listItem">1350 N High St.,</li> 
       <li class="dealer-summary-listItem">Columbus, Ohio - 43201</li> 
       <li class="dealer-summary-listItem">(614) 294-2545</li> 
      </ul> 
      <ul class="dealer-summary-list"> 
       <li class="dealerName">Toledo</li> 
       <li class="dealer-summary-listItem">1415 S Byrne Rd.,</li> 
       <li class="dealer-summary-listItem">Toledo, Ohio - 43614</li> 
       <li class="dealer-summary-listItem">(419) 382-0792</li> 
      </ul> 
     </div> 
    </div> 

Я хотел бы, чтобы нажать любой список и он преобразуется в формат JSON, подобный этой

объекта адреса: "8383 чиппев Rd,." локаль: "Brecksville, Огайо - 44141" телефон: "(440) 740-0535" название: "Brecksville"

Я пытался несколько раз с неправильными результатами ...

  var dealerSummary = []; 
    $("ul.dealer-summary-list > li").each(function() { 
     dealerSummary.push({ 
      "title": $(this).text(), 
      "address": $(this).text(), 
      "locale": $(this).text(), 
      "phone":$(this).text() 
     }); 
    }) 

Только перетаскиваемый элемент должен быть преобразован. Пожалуйста помоги.

Answer 1

Предполагая, что ваши li тегов всегда в том же порядке: название, адрес, локалите, телефон, вы можете сделать это с помощью простого find(), а затем сцепить текст li в объект.

Вот пример:

$("#dealersList").on("click", "ul", function() { 
 
    var obj = {}; 
 
    var items = $(this).find("li"); 
 
    
 
    obj.title = items.eq(0).text(); 
 
    obj.address = items.eq(1).text(); 
 
    obj.locale = items.eq(2).text(); 
 
    obj.phone = items.eq(3).text(); 
 
    
 
    console.log(obj); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="dealersList" class="dealer-summary"> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Brecksville</li> 
 
    <li class="dealer-summary-listItem">8383 Chippewa Rd.,</li> 
 
    <li class="dealer-summary-listItem">Brecksville, Ohio - 44141</li> 
 
    <li class="dealer-summary-listItem">(440) 740-0535</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Dayton</li> 
 
    <li class="dealer-summary-listItem">3520 W Siebenthaler Ave.,</li> 
 
    <li class="dealer-summary-listItem">Dayton, Ohio - 45406</li> 
 
    <li class="dealer-summary-listItem">(937) 567-9578</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Cleveland</li> 
 
    <li class="dealer-summary-listItem">900 Euclid Ave.,</li> 
 
    <li class="dealer-summary-listItem">Cleveland, Ohio - 44115</li> 
 
    <li class="dealer-summary-listItem">(216) 302-3020</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Bridgetown</li> 
 
    <li class="dealer-summary-listItem">5830 Harrison Ave.,</li> 
 
    <li class="dealer-summary-listItem">Cincinnati, Ohio - 45248</li> 
 
    <li class="dealer-summary-listItem">(513) 574-2810</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Columbus</li> 
 
    <li class="dealer-summary-listItem">1350 N High St.,</li> 
 
    <li class="dealer-summary-listItem">Columbus, Ohio - 43201</li> 
 
    <li class="dealer-summary-listItem">(614) 294-2545</li> 
 
    </ul> 
 
    <ul class="dealer-summary-list"> 
 
    <li class="dealerName">Toledo</li> 
 
    <li class="dealer-summary-listItem">1415 S Byrne Rd.,</li> 
 
    <li class="dealer-summary-listItem">Toledo, Ohio - 43614</li> 
 
    <li class="dealer-summary-listItem">(419) 382-0792</li> 
 
    </ul> 
 
</div>

Answer 2

Вы можете добавить обработчики событий на всех ул, а затем просто создать объект с заданными свойствами, предполагающих порядок Li не меняется.

var uls = document.querySelectorAll('.dealer-summary-list'); 
var obj = {}; 
uls.forEach(function(ul){ 
    ul.addEventListener('click', function(){ 
     var lis = ul.querySelectorAll('li'); 

      obj.address = lis[1].innerText; 
      obj.locale = lis[2].innerText; 
      obj.phone = lis[3].innerText; 
      obj.title = lis[0].innerText; 
     console.log(JSON.stringify(obj)); 
    }); 
});