jQuery how to mapping array with radio buttons value

Question

I'm trying to write a shopping list function just for fun, if user didn't click any radio buttons they'll get a fully log list from server, I finished that part but I'm stuck right now don't know how to show the list mapping with the radio buttons value that user click? For example, if user click guava then the log will only show the message about guava:

Jan 2 22:00:10   guava for 1

if user click guava and strawberry then the log will show both guava and strawberry's message like this:

Jan 1 00:00:10   strawberry for 2
Jan 2 22:00:10   guava for 1
Jan 3 03:10:16   strawberry for 22

My code is here:

var cart = "|grocery|Jan  1 00:00:10 |shopping| [list]|strawberry| for 2 |grocery|Jan  1 00:20:23 |shopping| [list]|apple| for 4 |grocery|Jan  2 00:10:10 |shopping| [list]|apple| for 5 |grocery|Jan  2 00:20:15 |shopping| [list]|banana| for 3 |grocery|Jan  2 10:00:00 |shopping| [list]|apple| for 10 |grocery|Jan  2 22:00:10 |shopping| [list]|guava| for 1 |grocery|Jan  3 01:09:08 |shopping| [list]|watermelon| for 7 |grocery|Jan  3 03:10:16 |shopping| [list]|strawberry| for 22";

$("#button").click(function(){
	var tidyList = cart.split("|grocery|");
  
  for(var i=0; i<tidyList.length; i++){
  	var list = tidyList[i].split("|");
    var tmp = list[0] + "\r&nbsp;&nbsp;" + list[3] + list[4] + "\r<br/>";
        
    if(list.length > 1 && $("input:radio").is(":checked") == false){
    	$("#showList").append(tmp);
    }
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<th>Fruits for you</th>
<td>
  <ul>
    <li>
      <input type="radio" value="apple" id="apple">
      <label for="apple">apple</label>
    </li>
    <li>
      <input type="radio" value="banana" id="banana">
      <label for="apple">banana</label>
    </li>
    <li>
      <input type="radio" value="watermelon" id="watermelon">
      <label for="apple">watermelon</label>
    </li>
    <li>
      <input type="radio" value="guava" id="guava">
      <label for="apple">guava</label>
    </li>
    <li>
      <input type="radio" value="strawberry" id="strawberry">
      <label for="apple">strawberry</label>
    </li>
  </ul>
</td>
</tr>
</table>
<input type="button" value="Shopping List" id="button">
<div id="showList"></div>

You should start by using a proper data structure for this, and not a string. — C3roe
– C3roe, Commented Jul 17, 2017 at 10:05

Farhad Bagherlo · Accepted Answer · 2017-07-17 10:41:28Z

var cart = "|grocery|Jan  1 00:00:10 |shopping| [list]|strawberry| for 2 |grocery|Jan  1 00:20:23 |shopping| [list]|apple| for 4 |grocery|Jan  2 00:10:10 |shopping| [list]|apple| for 5 |grocery|Jan  2 00:20:15 |shopping| [list]|banana| for 3 |grocery|Jan  2 10:00:00 |shopping| [list]|apple| for 10 |grocery|Jan  2 22:00:10 |shopping| [list]|guava| for 1 |grocery|Jan  3 01:09:08 |shopping| [list]|watermelon| for 7 |grocery|Jan  3 03:10:16 |shopping| [list]|strawberry| for 22";

$("#button").click(function(){
	var tidyList = cart.split("|grocery|");
    
  for(var i=1; i<tidyList.length; i++){
  	var list = tidyList[i].split("|");
    
    var tmp = list[0] + "\r&nbsp;&nbsp;" + list[3] + list[4] + "\r<br/>";
   if($( "input:radio:checked" ).val()==list[3]){
   $("#showList").append(tmp);
   }
    
   
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<th>Fruits for you</th>
<td>
  <ul>
    <li>
      <input name="grocery" type="radio" value="apple" id="apple">
      <label for="apple">apple</label>
    </li>
    <li>
      <input name="grocery" type="radio" value="banana" id="banana">
      <label for="banana">banana</label>
    </li>
    <li>
      <input name="grocery" type="radio" value="watermelon" id="watermelon">
      <label for="watermelon">watermelon</label>
    </li>
    <li>
      <input name="grocery" type="radio" value="guava" id="guava">
      <label for="guava">guava</label>
    </li>
    <li>
      <input name="grocery" type="radio" value="strawberry" id="strawberry">
      <label for="strawberry">strawberry</label>
    </li>
  </ul>
</td>
</tr>
</table>
<input type="button" value="Shopping List" id="button">
<div id="showList"></div>

Collectives™ on Stack Overflow

jQuery how to mapping array with radio buttons value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related