get data from web page using java script and JQuery in the browser console

Question

i have below link for specific product in products web site,how i can get the product specification data as object {} https://www.virginmegastore.ae/en/gaming/playstation/playstation-games/sonic-forces---ps4/p/714792

i need get below info:

i used below metgod in the browser console, but it returned huge data:

$.get("https://www.virginmegastore.ae/en/gaming/playstation/playstation-games/sonic-forces---ps4/p/714792", function(data){
    console.log(data);
  });

and the output is:

<!DOCTYPE html>
<!--[if IE 8 ]> <html class="lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <title>
        Sonic Forces - PS4 | Playstation Games | Playstation | Gaming | Virgin Megastore</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <meta name="msvalidate.01" content="D1EAD7D5C2ED626960668C0EAD15CB6A" />

    <meta name="keywords" content="Project Sonic 2017,Sonic Force,SF">
<meta name="description" content="When things look their darkest, even heroes need a helping hand. For the first time in the Sonic series, players can create their own original Hero Character, and cu">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://www.virginmegastore.ae/gaming/playstation/playstation-games/sonic-forces---ps4/p/714792"/>

    <link rel="alternate" hreflang="en-AE" href="https://www.virginmegastore.ae/en"/>

    <link rel="shortcut icon" type="image/x-icon" media="all" href="/_ui/responsive/theme-virgin/images/icons/favicon.ico" />

    <link rel="apple-touch-icon" href="/_ui/responsive/theme-virgin/images/icons/apple-icon.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/_ui/responsive/theme-virgin/images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/_ui/responsive/theme-virgin/images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/_ui/responsive/theme-virgin/images/icons/apple-icon-152x152.png">



    <link rel="stylesheet" type="text/css" media="all" href="/_ui/addons/assistedservicestorefront/responsive/common/css/assistedservicestorefront.css"/>
<link rel="stylesheet" type="text/css" media="all" href="/_ui/addons/assistedservicestorefront/responsive/common/css/storeFinder.css"/>
<link rel="stylesheet" type="text/css" media="all" href="/_ui/addons/assistedservicestorefront/responsive/common/css/customer360.css"/>
<link rel="stylesheet" type="text/css" media="all" href="/_ui/addons/payfortaddon/responsive/common/css/payfortaddon.css"/>
<link rel="stylesheet" type="text/css" media="all" href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800"/>

<link rel="stylesheet" type="text/css" media="all" href="/_ui/responsive/theme-virgin/css/style.min.css?v=3.11.0"/>
    
<script type="text/javascript">

var mediator = (function() {
    var subscribe = function(tracker, fn) {
            if (!mediator.trackers[tracker])
            {
                mediator.trackers[tracker] = [];
            }
            mediator.trackers[tracker].push({context: this, callback: fn});
            return this;
        },

        publish = function(tracker) {
            if (!mediator.trackers[tracker])
            {
                return false;
            }
            var args = Array.prototype.slice.call(arguments, 1);
            for (var i = 0, l = mediator.trackers[tracker].length; i < l; i++)
            {
                var subscription = mediator.trackers[tracker][i];
                subscription.callback.apply(subscription.context, args);
            }
            return this;
        },

        publishAll = function() {
            if (Object.keys(mediator.trackers).length === 0)
            {
                return false;
            }
            for (var tracker in mediator.trackers)
            {
                var args = [tracker].concat(Array.prototype.slice.call(arguments));
                mediator.publish.apply(this, args);
            }
            return this;
        };

    return {
        trackers: {},
        publish: publish,
        publishAll: publishAll,
        subscribe: subscribe
    }
})()


</script><!-- Google Tag Manager -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NMB22J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-NMB22J');</script>
    <!-- End Google Tag Manager -->
<!-- Google Tag Manager Data Layer -->
    <script type="text/javascript">
        
        window.dataLayer = window.dataLayer || [];
        

        window.dataLayer.push({
            'ecommerce': {
                'detail': {
                    'products': [{
                        'id':       '714792',
                        'name':     "Sonic Forces - PS4",
                        'brand':    'SEGA',
                        'price':    '99.0',
                        'category': 'Playstation Games',
                        'variant':
                                ''
                    }]
                }
            }
        })
        ;

i just need below:

**'products': [{
                            'id':       '714792',
                            'name':     "Sonic Forces - PS4",
                            'brand':    'SEGA',
                            'price':    '99.0',
                            'category': 'Playstation Games',
                            'variant':
                                    ''
                        }]**

easier to not stringify, console will output the data nicely for you that way console.log(data); or for (let item in data){ console.log('item',data,'data[item]',data[item]) } — admcfajn
– admcfajn, Commented Aug 25, 2020 at 19:50
You use DOM and from it you pull specific blocks, and for each block you can pull attributes. You can also check what XPATH is — Ron
– Ron, Commented Aug 25, 2020 at 19:50
yes,but the data distributed between html elements,is there any method to get all of them by one selector?@Ron — Alaa
– Alaa, Commented Aug 25, 2020 at 20:11

Li-Jyu Gao · Accepted Answer · 2020-08-26 06:05:42Z

2

Try to get window.dataLayer.push's json string by regular expression
Parse the json string by JSON.parse().
The json string uses single quote ' , should be transferred to double quote "

like this sample code, finally the productDetails is a complete js object.

 $.get("https://www.virginmegastore.ae/en/gaming/playstation/playstation-games/sonic-forces---ps4/p/714792", function (data) {
            var productDetailsJson = data.match(/window\.dataLayer\.push[^(]*\(([^)]*)\)/)[1];
            var productDetails = JSON.parse(productDetailsJson.replace(/'/g, '"'));
            console.log(productDetails);
});

answered Aug 26, 2020 at 6:05

Li-Jyu Gao

9406 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

get data from web page using java script and JQuery in the browser console

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related