how to extract specific data field from Javascript using jquery?

I am not sure whether this question is already asked and I am new to jquery and javascript. But, I couldnt find any answer relevant to my question. I am trying to create an apify crawler. I need to extract specific data from following javascript

<script type="application/json" class="js-react-on-rails-component">
{
    "assetHost": null,
    "version": "0.0.4-855-gda76bc6\n",
    "availableLocales": [
      "de",
      "en"
    ],
    .........
    "stats": {
        "visitors": [
          {
            "domestic": 600,
            "note": "incl. 250 conference participants",
            "year": 2017,
            "total": 600,
            "structure": null,
            "latest": true
          }
        ],
        "venue": [
          {
            "total": 376,
            "domestic": 376,
            "latest": true,
            "year": 2017
          }
        ],
        "exhibitors": [
          {
            "total_indirect": 0,
            "total": 46,
            "domestic": 46,
            "latest": true,
            "year": 2017
          }
        ]
      },

      ..........
      </script>

I need to get the fields: total and domestic from exhibitors using jquery. I tried this query (JSON.parse($('.js-react-on-rails-component').text())).exhibitors.total.text().trim() But it didnt return anything. So, I tried to create a variable and called it on the result as follows:

function pageFunction(context) {
    var $ = context.jQuery;
    var exhibitor = JSON.parse($('.js-react-on-rails-component').text());
    var total = exhibitor.exhibitors.total;
    var domestic = exhibitor.exhibitors.domestic;

    if (context.request.label === "START") {
    .....
    } else { 
    var result = {
            total: total,
            domestic: domestic
        };
    return result;  
    }
}

But, this code also doesnt return any result.

Solution

Since you are used

(JSON.parse($('.js-react-on-rails-component').text())).exhibitors.total.text().trim()

If you closely look to json the exhibitors property of json is an array and you have to use exhibitors[i].total and exhibitors[i].domestic where i = 0...N; instead of you are using exhibitors.total and exhibitors.domestic

First of all you please take your dom component to one variable for simplicity,

var myJson = JSON.parse($('.js-react-on-rails-component').text());

var total = myJson.stats.exhibitors[i].total;
var domestic = myJson.stats.exhibitors[i].domestic;

where i = 0...N;

Edit:

Please look at example below

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>

    <div></div>    
    
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    
    
    <script type="application/json" id="myjsonscript">
        {
        "stats": {
        "visitors": [
        {
        "domestic": 600,
        "note": "incl. 250 conference participants",
        "year": 2017,
        "total": 600,
        "structure": null,
        "latest": true
        }
        ],
        "venue": [
        {
        "total": 376,
        "domestic": 376,
        "latest": true,
        "year": 2017
        }
        ],
        "exhibitors": [
        {
        "total_indirect": 0,
        "total": 46,
        "domestic": 46,
        "latest": true,
        "year": 2017
        }
        ]
        }
        }
    </script>

    
    <script id='script' type='text/javascript'>

        var myJson = JSON.parse($('#myjsonscript').text());
        $('div').html(myJson);

        var total = myJson.stats.exhibitors[0].total;
        var domestic = myJson.stats.exhibitors[0].domestic;

        alert('total:' + total);
        alert('domestic: ' + domestic);
    </script>

</body>
</html>