Data attribute to multi array

Question

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.

Arun P Johny · Accepted Answer · 2014-04-03 00:27:44Z

1

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

answered Apr 3, 2014 at 0:27

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

lolo Over a year ago

Thank you! It works! About the html it was because of copy/paste... If I want to get image_src and image_link in each array (["image_src":"scr1", "image_link":"link1"],["image_src":"scr2", "image_link":"link2"]), what I need to do?

lolo Over a year ago

I get it : return [[ img.image_src, img.image_link ]];. Thank you for your help.

Collectives™ on Stack Overflow

Data attribute to multi array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related