Onclick convert UL to JSON

Question

On my webpage I have an area that summarizes multiple stores. Each store is a list with multiple list items.

            <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>

I would like to click any List and have it converted to a JSON similar to this

Object address:"8383 Chippewa Rd.," locale:"Brecksville, Ohio - 44141" phone:"(440) 740-0535" title:"Brecksville"

I've tried multiple times with incorrect results...

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

Only the clicked item should be converted. Please help.

Answer 1

Assuming your li tags are always in the same order: title, address, locale, phone, you can do this with a simple find() and then concatenate the text of the li into an object.

Here's an example:

 $("#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

You can add event listeners on all the ul and then just create an object with the desired properties assuming li order doesn't change.

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));
    });
});