Retrieve object from data with jQuery

Question

I have the following form, an array as a data attribute (I've added spacing for readability):

http://jsfiddle.net/tmyie/9te6n/

<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="9" data-product_variations="

[{
    "variation_id": "18",
        "variation_is_visible": true,
        "is_purchasable": true,
        "attributes": {
        "attribute_pa_size": "a3"
    },
        "image_src": "",
        "image_link": "",
        "image_title": "",
        "image_alt": "",
        "price_html": "<span class=\"price\"><span class=\"amount\">£19.20<\/span><\/span>",
        "availability_html": "",
        "sku": "100",
        "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": "22",
        "variation_is_visible": true,
        "is_purchasable": true,
        "attributes": {
        "attribute_pa_size": "a5"
    },
        "image_src": "",
        "image_link": "",
        "image_title": "",
        "image_alt": "",
        "price_html": "<span class=\"price\"><span class=\"amount\">£8.75<\/span><\/span>",
        "availability_html": "",
        "sku": "100",
        "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": "19",
        "variation_is_visible": true,
        "is_purchasable": true,
        "attributes": {
        "attribute_pa_size": "a4"
    },
        "image_src": "",
        "image_link": "",
        "image_title": "",
        "image_alt": "",
        "price_html": "<span class=\"price\"><span class=\"amount\">£13.50<\/span><\/span>",
        "availability_html": "",
        "sku": "100",
        "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"
}]

However, I'm not sure how to access it. I've tried:

alert($('.variations_form cart').data('product_variations'));

and

alert($('.variations_form cart').attr('data-product_variations'));

Am I doing this correctly?

Answer 1

Try

alert($('.variations_form').data('product_variations[0].variation_id');

Change class selectors, access one item in the array and point to a specific field.

Answer 2

There's an issue with your selector. You want the element with class="variations_form cart" , so you've used this selector:

$('.variations_form cart')

However, in terms of CSS that actually means "a <cart> element this is a descendant of an element with the class .variations_form ". You want this:

$('.variations_form.cart')

which is essentially "the elements that have both the variations_form class and the cart class".

Answer 3

USE single qoute( ' ) in data-product_variations form attribute, because in JSON data have to double qoute( " ),

    <form class="variations_form cart" method="post" 
 enctype="multipart/form-data" data-product_id="9" data-product_variations='
    [{
        "variation_id": "18",
            "variation_is_visible": true,
            "is_purchasable": true,
            "attributes": {
            "attribute_pa_size": "a3"
        },
            "image_src": "",
            "image_link": "",
            "image_title": "",
            "image_alt": "",
            "price_html": "<span class=\"price\"><span class=\"amount\">£19.20<\/span><\/span>",
            "availability_html": "",
            "sku": "100",
            "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": "22",
            "variation_is_visible": true,
            "is_purchasable": true,
            "attributes": {
            "attribute_pa_size": "a5"
        },
            "image_src": "",
            "image_link": "",
            "image_title": "",
            "image_alt": "",
            "price_html": "<span class=\"price\"><span class=\"amount\">£8.75<\/span><\/span>",
            "availability_html": "",
            "sku": "100",
            "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": "19",
            "variation_is_visible": true,
            "is_purchasable": true,
            "attributes": {
            "attribute_pa_size": "a4"
        },
            "image_src": "",
            "image_link": "",
            "image_title": "",
            "image_alt": "",
            "price_html": "<span class=\"price\"><span class=\"amount\">£13.50<\/span><\/span>",
            "availability_html": "",
            "sku": "100",
            "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>

and also please use right selector to parse data attribute content

console.log($("form.variations_form").data("product_variations"));

DEMO

Answer 4

Try this Worked for me -

var idd = $('form.variations_form').attr('data-product_variations');
console.log(idd);