javascriptjqueryjson

How to run query on JSON using jQuery Ajax

I am working on this demo. How can I retrieve the cost option of each JSON file and selected item from the list which has equal value?

 var data = {
   "items": [{
     "item": "Item 1",
     "cost": "100"
   }, {
     "item": "Item 2",
     "cost": "200"
   }, {
     "item": "Item 3",
     "cost": "300"
   }, {
     "item": "Item 4",
     "cost": "400"
   }, {
     "item": "Item 5",
     "cost": "500"
   }, {
     "item": "Item 6",
     "cost": "600"
   }]
 };

 $('span').on('click', function() {
   console.info($(this).text());
   var item = $(this).text();
 });
li {
  list-style-type: none;
}

li span {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #888;
  background-color: #fff;
  border-color: #ccc;
  display: block;
  width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><span>Item 1</span></li>
  <li><span>Item 2</span></li>
  <li><span>Item 3</span></li>
  <li><span>Item 4</span></li>
  <li><span>Item 5</span></li>
  <li><span>Item 6</span></li>
</ul>

Solution

  • Create the list using the json file, adding the id of the list element as the index of the item in the array. So when the event is fired, you can read the event's id and append the corresponding cost. 

    (function() {
   // Loop through the items array
   for (var i = 0; i < data.items.length; i++){
       var item = data.items[i];
       // Add an <li> element for each item, with the ID being the index
       $('ul').append('<li><span id='+ i +'>'+item.item+'</span></li>');
   }
   $('span').on('click', function(e) {
        console.info($(this).text());
        // Use the id to find the corresponding cost from the items array
        $(this).text($(this).text() + ' ' + data.items[this.id].cost);
   });
})();

    I've edited your jsFiddle