How to convert ul li value into an array format in console with jquery

Question

I have an structure of ul li contains some value,When I check the checkbox of one or multiple child element the value of that particular li should show along with its parent value in below array format in browser console.If I won't select any child,that value or its parent value should not show.Every every thing is working fine but here only problem is that child and its parents also showing for which I have not checked.I have updated the code in plunker https://plnkr.co/edit/koWZabX8OV88opxSDNIv?p=preview, Below is my code

$(".applybtn").click(function() {
  alert('sss');
  var getAllList = $('#leftNavBar ul').find('li.childData ul li');
  var getAllParents = $('#leftNavBar ul').find('li.parentNav');
  var getFilterData = [];
  $(getAllParents).each(function() {
    getFilterData.push({
      name: $(this).text().trim(),
      value: []

    });
  });
  $(getAllList).each(function() {
    if ($(this).find('input').prop("checked") == true) {
      var parent = $(this).closest("ul").closest("li").prev().text().trim();
      var getIndex = _.findIndex(getFilterData, ['name', parent]);
      var name = $(this).text().trim();
      getFilterData[getIndex].value.push(name);
    }
  });
  console.log(JSON.stringify(getFilterData));
});

.parentNav {
  background: red;
  font-size: 16px
}

.childData {
  background: #ccc;
}

.childData ul li {
  clear: both;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-3" id="leftNavBar">
  <ul>
    <li class="parentNav">parent1</li>
    <li class="childData">
      <ul>
        <li>child11<span class="pull-right"><input type ="checkbox"/></span></li>
        <li>child12<span class="pull-right"><input type ="checkbox"/></span></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li class="parentNav">parent2</li>
    <li class="childData">
      <ul>
        <li>child2<span class="pull-right"><input type ="checkbox"/></span></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li class="parentNav">parent3</li>
    <li class="childData">
      <ul>
        <li>child3<span class="pull-right"><input type ="checkbox"/></span></li>
      </ul>
    </li>
  </ul>
  <div class="applybutton"><button class="applybtn" type="button">Appply</button></div>
</div>

json format for output

 [{
            "name": "parent1",
            "value": ["child11", "child12"]
        }, {
            "name": "parent2",
            "value": []
        }, {
            "name": "parent3",
            "value": []
        }]

You should refer to this question: stackoverflow.com/questions/26078889/…. This is a duplicate. — ca1c
– ca1c, Commented Oct 25, 2018 at 19:07
Possible duplicate of How to create an array of values from LI inside a UL — ca1c
– ca1c, Commented Oct 25, 2018 at 19:07
@T.Bragg Isn't this a bit different than that other question? This question is asking about pulling li's and their children into a multi-dimensional array based off selected check boxes. The other question does not. — Chillie
– Chillie, Commented Oct 25, 2018 at 19:22

Ele · Accepted Answer · 2018-10-25 20:03:32Z

1

You can use the function $.text() to get the text inside of an element.

This approach finds the parentNav and then its children using the function $.siblings().

var obj = [];
$('.parentNav').each(function() {
  var childrenLis = $(this).siblings('.childData').find('li');
  obj.push({
    name: $(this).text(),
    value: childrenLis.toArray().map(l => $(l).text())
  })
});

console.log(obj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="col-md-3" id="leftNavBar">  <ul>    <li class="parentNav">parent1</li>    <li class="childData">      <ul>        <li>child11<span class="pull-right"><input type ="checkbox"/></span></li>        <li>child12<span class="pull-right"><input type ="checkbox"/></span></li>      </ul>    </li>  </ul>  <ul>    <li class="parentNav">parent2</li>    <li class="childData">      <ul>        <li>child2<span class="pull-right"><input type ="checkbox"/></span></li>      </ul>    </li>  </ul>  <ul>    <li class="parentNav">parent3</li>    <li class="childData">      <ul>        <li>child3<span class="pull-right"><input type ="checkbox"/></span></li>      </ul>    </li>  </ul>  <div class="applybutton"><button class="applybtn" type="button">Appply</button></div></div>

Putting that approach within your code

$(".applybtn").click(function() {
  var getFilterData = [];
  $('.parentNav').each(function() {
    var childrenLis = $(this).siblings('.childData').find('li');
    getFilterData.push({
      name: $(this).text(),
      value: childrenLis.toArray().map(l => $(l).text())
    })
  });
  console.log(JSON.stringify(getFilterData));
});

.parentNav {
  background: red;
  font-size: 16px
}

.childData {
  background: #ccc;
}

.childData ul li {
  clear: both;
}

    .as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-3" id="leftNavBar">
  <ul>
    <li class="parentNav">parent1</li>
    <li class="childData">
      <ul>
        <li>child11<span class="pull-right"><input type ="checkbox"/></span></li>
        <li>child12<span class="pull-right"><input type ="checkbox"/></span></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li class="parentNav">parent2</li>
    <li class="childData">
      <ul>
        <li>child2<span class="pull-right"><input type ="checkbox"/></span></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li class="parentNav">parent3</li>
    <li class="childData">
      <ul>
        <li>child3<span class="pull-right"><input type ="checkbox"/></span></li>
      </ul>
    </li>
  </ul>
  <div class="applybutton"><button class="applybtn" type="button">Appply</button></div>
</div>

edited Oct 25, 2018 at 20:03

answered Oct 25, 2018 at 19:22

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

carreankush Over a year ago

I dint get you,here nothing is coming like onclick button,when I run code its directly showing console

Ele Over a year ago

@carreankush yes, you need to put it within your code.

carreankush Over a year ago

Here if I check child11 and child 12 output should be only these value along with its parent (parent1) should show like [{"name":"parent1","value":["child11","child12"]}] others should not show,similarly only checked child and parents should show.

carreankush Over a year ago

can anyone help me please

Collectives™ on Stack Overflow

How to convert ul li value into an array format in console with jquery

json format for output

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

json format for output

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related