How to create a JSON Array with the div data

Question

Inside myordersdiv, I have all this below div's appended to it .

<div data-role="collapsible">
   <div class="prd-items-detials">
      <ul>
         <li class="head">
            <form><label class="testtt" for="checkbox-mini-0">' + itemname + '</label></form>
         </li>
         <li class="prd-items-qt">
            <div class="col"><span class="prd-sm-img"><img id="imagesd" type="img" height="40" width="40"  src="' + image + '"/><span></div>
            <div class="col"><i class="minus" id_attr="' + id_attr_val + '"></i><i class="qt qt_' + id_attr_val + '" id_attr="' + id_attr_val + '">1</i><i class="plus" id_attr="' + id_attr_val + '"></i></div>
            <div class="col"><a href="#" class="btn btn-sm">Topping</a></div>
            <div style="display: none;" class="price" id_attr="' + id_attr_val + '">' + price + '</div>
            <div class="col total total_' + id_attr_val + '" id_attr="' + id_attr_val + '">' + price + '</div>
         </li>
      </ul>
   </div>
</div>

HTML Section .

 <div id="myordersdiv">
 </div>

On click of a Confirm Order Button , I need to get all the images and its corresponding quantity and price present in that div , in below format

var divdata = '{"data": [{"name": "JSON_images/popcorn.jpg","quan":"1","price":"50"},{"name": "JSON_images/icecream_cup.jpg","quan":"2","price":"100"}]}';

Right now i am able to get all the images present under that div .

$(document).on("click", ".btn-confirmorder", function () {
   var imagedata = $("#myordersdiv").find('img').map(function(){
    return $(this).attr('src')
}).get()

The screen look this way .

enter image description here

I have seen this logic for creating an JSON array:

var divdata = {
    data: []
};

for(var i in someData) {

    var item = someData[i];

    divdata.data.push({ 
        "image" : item.firstName,
        "price"  : item.lastName,
        "quantity"     : item.age 
    });
}

please tell me how can i do all this under the listener ??

Raul Rene · Accepted Answer · 2014-06-15 08:29:43Z

3

I can't really figure out which of the elements holds what, so for the sake of displaying the algorithm I will go with: quantity is in a div having the class quantity, the price is in a div having the class total and each element is in its own prd-items-detials class div.

var divdata = {
     data: []
};    
var price, quantity, name;

// Iterate through each element
$.each($('.prd-items-detials'), function(i, elem) {
    price = $(elem).find('.total').html(); // The price is the inner HTML of the DIV with class 'total'
    quantity = $(elem).find('.quantity').html(); // The quantity is the inner HTML of the DIV with class 'quantity'
    name = $(elem).find('img').attr('src'); // The name is the 'src' attribute of the image

    divdata.data.push({ 
         "image": name,
         "price": price,
         "quantity": quantity 
    });
});

Please change the classes accordingly where necessary to get the information based on where your data is located.

P.S. You made a typo with detials, I think you were looking for details.

answered Jun 15, 2014 at 8:29

Raul Rene

10.3k9 gold badges56 silver badges79 bronze badges

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

1 Comment

user663724 Over a year ago

Thank you very much , i require this .

Collectives™ on Stack Overflow

How to create a JSON Array with the div data

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