# How to process the nest object (from ES response) in search-ui

**URL:** <https://discuss.elastic.co/t/how-to-process-the-nest-object-from-es-response-in-search-ui/208844>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [November 21, 2019, 9:33am UTC](https://discuss.elastic.co/t/how-to-process-the-nest-object-from-es-response-in-search-ui/208844 "2019-11-21T09:33:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nee\_Defeng](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nee_defeng/32/45771_2.png) [@Nee\_Defeng](https://discuss.elastic.co/u/Nee_Defeng)\
**Post date:** [November 21, 2019, 9:33am UTC](https://discuss.elastic.co/t/how-to-process-the-nest-object-from-es-response-in-search-ui/208844/1 "2019-11-21T09:33:03Z")

</div>

I now this is for App Search, but not sure where to post this search-ui for elasticsearch question.

In a hard way that I learned that search-ui is expecting the 'id' field in the elasticsearch index hence the response. The problem is that the index is created by another program which does not have 'id', though it has the '\_id' field.

In the buildState.js file, I am able to convert '\_id' to 'id', but for this reason, I have to use the 'record' instead of 'record.\_source'. With this, the result set returns the \_source as this:

`"_source": [object Object]`

while 'id' is normal:

`"id": cee86628eaebffb36d3378be7a94651`

So, how can I get the field inside the '\_source' object?

Here is the code from buildState.js:

```
  const res = hits.map(record => {
    return Object.entries(record)
      .map(([fieldName, fieldValue]) => [
        fieldName == "_id" ? "id" : fieldName,
        toObject(fieldValue, getHighlight(record, fieldName))
      ])
      .reduce(addEachKeyValueToObject, {});
  });

```

Here is the state returned by buildState.js, and you can see it is an object.:

```
{
	"id": {
		"raw": "8239827cd9e538e88a03f71d2c8ae14"
	},
	"_index": {
		"raw": "myfirstfsjob"
	},
	"_score": {
		"raw": 9.116072
	},
	"_source": {
		"raw": {
			"content": "XXX",
			"file": {
				"filename": "dt4_8.pdf",
				"url": "c:\\dt4_8.pdf"
			}
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [November 21, 2019, 12:36pm UTC](https://discuss.elastic.co/t/how-to-process-the-nest-object-from-es-response-in-search-ui/208844/2 "2019-11-21T12:36:33Z")

</div>

Hey @Nee_Defeng,

When using Elasticsearch (as opposed to App Search) with Search UI, there's a bit more work involved, because there is not an out of the box connector to create requests and process responses. It is up to you to write that code. We do provide a nice example to get you started, as you saw, but is not expected to work in every case.

The responsibility of that `buildState.js` file is to convert an Elasticsearch response into a state object that Search UI understands.

So, in this case, you would need to adapt that code to return your response to be an object with fields that you need to use in your UI. Something like:

```auto
{
	"id": {
		"raw": "8239827cd9e538e88a03f71d2c8ae14"
	},
	"_index": {
		"raw": "myfirstfsjob"
	},
	"_score": {
		"raw": 9.116072
	},
	"content": {
		"raw": "XXX"
	},
	"file_filename": {
		"raw": "dt4_8.pdf"
	},
	"file_url": {
		"raw": "c:\\dt4_8.pdf"
	}
}

```

Let me know whether this makes sense to you or not.

---

<div class="post-metadata">

**Author:** ![Nee\_Defeng](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nee_defeng/32/45771_2.png) [@Nee\_Defeng](https://discuss.elastic.co/u/Nee_Defeng)\
**Post date:** [November 21, 2019, 7:52pm UTC](https://discuss.elastic.co/t/how-to-process-the-nest-object-from-es-response-in-search-ui/208844/3 "2019-11-21T19:52:46Z")

</div>

It makes sense, absolutely.

I guess now I need to seek the help from React community for adapting the ES response into what EUI expects. BTW, I am new to React hence I am struggling with this.

Thanks,

---

<div class="post-metadata">

**Author:** ![Nee\_Defeng](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nee_defeng/32/45771_2.png) [@Nee\_Defeng](https://discuss.elastic.co/u/Nee_Defeng)\
**Post date:** [November 21, 2019, 10:40pm UTC](https://discuss.elastic.co/t/how-to-process-the-nest-object-from-es-response-in-search-ui/208844/4 "2019-11-21T22:40:33Z")

</div>

OK, I think I got it now, the idea is to construct the new structure after destructuring from the old record:

```
 return hits.map(record => {
    const {
      _id: id,
      _score,
      _source: {
        content,
        file: { url, filename }
      },
      highlight: { content: highlighted }
    } = record;
   // console.log("this is destructre:", id, _score, url, filename, highlighted);
    const new_record = { id: id, title: filename, url, highlighted };
    return Object.entries(new_record)
      .map(([fieldName, fieldValue]) => [
        fieldName,
        toObject(fieldValue, getHighlight(new_record, fieldName))
      ])
      .reduce(addEachKeyValueToObject, {});
  });
}

```

Now I have the issue of displaying the highlighted text in the UI, it is not shown as the yellow highlighted text, but like this:

`weather<em>is</em> metadata <em>Scanner</em> like this`

Any advice?

---

<div class="post-metadata">

**Author:** ![Nee\_Defeng](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nee_defeng/32/45771_2.png) [@Nee\_Defeng](https://discuss.elastic.co/u/Nee_Defeng)\
**Post date:** [November 22, 2019, 11:42am UTC](https://discuss.elastic.co/t/how-to-process-the-nest-object-from-es-response-in-search-ui/208844/5 "2019-11-22T11:42:58Z")

</div>

One more question about the onAutocompleteResultClick function, I am trying to mimic what onSearch function is doing,

```
  onAutocompleteResultClick: async state => {
    const { resultsPerPage, documentId } = state;
    const requestBody = buildRequest(state);
    const responseJson = await runRequest(requestBody);
    return buildState(responseJson, 20);
  }

```

And I managed to invoke the buildState(responseJson,20) function and the console.log of the results shown as below:  
[  
{  
"id": {  
"raw": "d268283745ae7a7de62f3a8df78b44"  
},  
"title": {  
"raw": "WIKI\_Sydney"  
},  
"url": {  
"raw": "[http://localhost:8080/INFA/MyOwn/MyKnowledge/WIKI\_Sydney](http://localhost:8080/INFA/MyOwn/MyKnowledge/WIKI_Sydney)"  
},  
"highlighted": {}  
}  
]

However, the search result is not refreshed, still shown the previous result.

What do I miss?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 20, 2019, 11:43am UTC](https://discuss.elastic.co/t/how-to-process-the-nest-object-from-es-response-in-search-ui/208844/6 "2019-12-20T11:43:03Z")

</div>

Closed on December 20, 2019, 11:43am UTC

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