CODEWITHSUNDEEP
javascriptjqueryarrayssplit
lolo
lolo

Reputation: 237

Data attribute to multi array

I want to find a value in an array from a html data attribute. And to compare value for some parameters.

My data attribute looks like to this: 

<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="22" data-product_variations="[{"variation_id":"23","variation_is_visible":true,"is_purchasable":true,"attributes":{"attribute_pa_color":"black"},"image_src":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_4_front1-450x470.jpg","image_link":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_4_front1.jpg","image_title":"T_4_front","image_alt":"","price_html":"","availability_html":"","sku":"","weight":" kg","dimensions":"","min_qty":1,"max_qty":0,"backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no"},{"variation_id":"1531","variation_is_visible":true,"is_purchasable":true,"attributes":{"attribute_pa_color":"green"},"image_src":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_3_front-450x470.jpg","image_link":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_3_front.jpg","image_title":"T_3_front","image_alt":"","price_html":"","availability_html":"","sku":"","weight":" kg","dimensions":"","min_qty":1,"max_qty":0,"backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no"}]"></form>

My answer is to convert this into an array then to get image_src and image_link.

I start with this:

var variationIMG = $('.variations_form.cart').attr('data-product_variations').split('},{');

variationIMG.map(function (img) {
   console.log(img);
    if (img.image_src == "scr") {
        return img.image_src
    } else {
        return null
    }
});

But it doesn't works because I didn't success to split correctly the data attribute.

Upvotes: 0

Views: 582

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Your html is not properly escaped, so try

<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="22" data-product_variations='[{"variation_id":"23","variation_is_visible":true,"is_purchasable":true,"attributes":{"attribute_pa_color":"black"},"image_src":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_4_front1-450x470.jpg","image_link":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_4_front1.jpg","image_title":"T_4_front","image_alt":"","price_html":"","availability_html":"","sku":"","weight":" kg","dimensions":"","min_qty":1,"max_qty":0,"backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no"},{"variation_id":"1531","variation_is_visible":true,"is_purchasable":true,"attributes":{"attribute_pa_color":"green"},"image_src":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_3_front-450x470.jpg","image_link":"http:\/\/localhost\/wordpress\/wp-content\/uploads\/2013\/06\/T_3_front.jpg","image_title":"T_3_front","image_alt":"","price_html":"","availability_html":"","sku":"","weight":" kg","dimensions":"","min_qty":1,"max_qty":0,"backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no"}]'></form>

then

var variationIMG = $('.variations_form.cart').data('product_variations');

var array = $.map(variationIMG, function (img) {
    return img.image_src
});

console.log(array)

Demo: Fiddle

Upvotes: 1

Related Questions