Unable to parse a nested JSON in an AJAX response

Question

I have written a code in jQuery/AJAX to query Elasticsearch and return a list of documents based on the search criteria. I am able to get the documents from Elasticsearch. I am trying to parse the documents and display them in a webpage. Here is the response from the Elasticsearch index.

   {
  "took": 12,
  "timed_out": false,
  "_shards": {
    "total": 1,
    "successful": 1,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": {
      "value": 4,
      "relation": "eq"
    },
    "max_score": 1.617034,
    "hits": [
      {
        "_index": "test",
        "_type": "_doc",
        "_id": "uhp0sW0BO2MOKYEQa-CB",
        "_score": 1.617034,
        "_source": {
          "MsgTime": "2019-10-09T16:57:39.829Z",
          "OrganizationID": "nasa",
          "UserID": "USER1",
          "TravelID": "1234",
          "MachineID": "9099",
          "Stage": "ingested"
        }
      },
      {
        "_index": "test",
        "_type": "_doc",
        "_id": "sxpnsW0BO2MOKYEQ9eAo",
        "_score": 1.617034,
        "_source": {
          "MsgTime": "2019-10-09T16:44:03.102Z",
          "OrganizationID": "nasa",
          "UserID": "USER1",
          "TravelID": "201710283fc113afa731459285b55d94bb8ddf02",
          "MachineID": "9099",
          "Stage": "processed"
        }
      }
    ]
  }
}

The output I am trying to achieve on a webpage is as follows for each "_source" element under "hits". The values will differ wherever applicable.

          "MsgTime": "2019-10-09T16:57:39.829Z",
          "OrganizationID": "nasa",
          "UserID": "USER1",
          "TravelID": "1234",
          "MachineID": "9099",
          "Stage": "ingested"

I tried to parse the output as an AJAX response in jQuery using the following code (just the parsing piece)

     $(document).ready(function() {
            $("#search").click(function() {
                var textboxvalue = $("#trip_id").val();                            
                    $.ajax({
                        url: myURL,
                        type: "GET",
                        dataType: 'json',
                        data: query = {
                                q: "TravelID: " +textboxvalue,
                                pretty:'true',
                                size:100
                        },
                        success: function( result ) { 

                            $.each( result, function( key, value ) {
                                $.each(value,function(hits,v){
                                    $.each(v,function(i,hits){
                                        $.each(hits,function(_source,v){
                                            console.log(_source,v);
                                        });
                                    });
                                });
                            });

In the parsing piece, I am unable to get the final output. I am unsure if my last $.each loop is correct.

I can provide more information if needed. I have excluded the HTML here.

Thanks in advance, Nick

Carsten Massmann · Accepted Answer · 2019-10-29 20:04:12Z

1

I extracted your parsing statement. It can essentially be reduced to the following:

obj =
{ "took": 12, "timed_out": false, "_shards": { "total": 1, "successful": 1, "skipped": 0, "failed": 0 }, "hits": { "total": { "value": 4, "relation": "eq" }, "max_score": 1.617034, "hits": [ { "_index": "test", "_type": "_doc", "_id": "uhp0sW0BO2MOKYEQa-CB", "_score": 1.617034, "_source": { "MsgTime": "2019-10-09T16:57:39.829Z", "OrganizationID": "nasa", "UserID": "USER1", "TravelID": "1234", "MachineID": "9099", "Stage": "ingested" } }, { "_index": "test", "_type": "_doc", "_id": "sxpnsW0BO2MOKYEQ9eAo", "_score": 1.617034, "_source": { "MsgTime": "2019-10-09T16:44:03.102Z", "OrganizationID": "nasa", "UserID": "USER1", "TravelID": "201710283fc113afa731459285b55d94bb8ddf02", "MachineID": "9099", "Stage": "processed" } } ] } }

console.log(obj.hits.hits.map(v=>v._source))

In your JavaScript object you have an object hits that you can directly address and in that you have an array hits that you can also address directly. To get the contents of the contained object with the _source attribute you need to use a looping technique like the .map() shown above.

edited Oct 29, 2019 at 20:04

answered Oct 29, 2019 at 19:57

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

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

3 Comments

Nick Over a year ago

Thanks for the response. Let me try it out...Appreciate your quick help.

Nick Over a year ago

Worked like a charm. Is the map() function same as map reduce ?

Carsten Massmann Over a year ago

.map() returns an array, while .reduce((acc,curr)=>{...; return acc}, acc_initobj) will return the object acc_initobj after it has been sent through all of the callback function calls asacc.

Collectives™ on Stack Overflow

Unable to parse a nested JSON in an AJAX response

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related