How can I 'get' or 'fetch' the response JSON value as shown in browser console?

JavaScript
1

The response is generated by an AJAX post process on change of a select option. I need to get the attributes and image objects. The AJAX process is handled by WooCommerce cart application and not my coding. I just need to grab the JSON response which is returned after the change event.

I can see the values in the browser’s inspector console in the response of the AJAX post action on select option change

POST URL

domain dot com/?wc-ajax=get_variation

Request

attribute_colors=Kiwi&attribute_sizes=L&product_id=1098

Response

How can I get this data?

{
	"attributes": {
		"attribute_colors": "Kiwi",
		"attribute_sizes": "L"
	},
	"availability_html": "",
	"backorders_allowed": false,
	"dimensions": {
		"length": "",
		"width": "",
		"height": ""
	},
	"dimensions_html": "N/A",
	"display_price": 14.85,
	"display_regular_price": 14.85,
	"image": {
		"title": "12172-54.jpg",
		"caption": "",
		"url": "/wp-content/uploads/2024/06/12172-54.jpg",
		"alt": "12172-54.jpg",
		"src": "/wp-content/uploads/2024/06/12172-54.jpg",
		"srcset": false,
		"sizes": "(max-width: 600px) 100vw, 600px",
		"full_src": "/wp-content/uploads/2024/06/12172-54.jpg",
		"full_src_w": 1200,
		"full_src_h": 1200,
		"gallery_thumbnail_src": "/wp-content/uploads/2024/06/12172-54.jpg",
		"gallery_thumbnail_src_w": 100,
		"gallery_thumbnail_src_h": 100,
		"thumb_src": "/wp-content/uploads/2024/06/12172-54.jpg",
		"thumb_src_w": 300,
		"thumb_src_h": 300,
		"src_w": 600,
		"src_h": 600
	},
	"image_id": 1169,
	"is_downloadable": false,
	"is_in_stock": true,
	"is_purchasable": true,
	"is_sold_individually": "no",
	"is_virtual": false,
	"max_qty": "",
	"min_qty": 1,
	"price_html": "<span class=\"price\"><span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&#36;</span>14.85</bdi></span></span>",
	"sku": "13763898588529132148",
	"variation_description": "",
	"variation_id": 1141,
	"variation_is_active": true,
	"variation_is_visible": true,
	"weight": "0.178",
	"weight_html": "0.178 oz"
}

I tried various fetch and jQuery get methods in my event without success. This is my code where I need to add the method to grab the attributes and image objects

jQuery(function($) {
	$("select#colors").on("change", function() {
		// fetch the response objects
	});
});
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.