I am testing a very basic reactive search implementation.
My code is as below: import React, { Component } from 'react'; import { ReactiveBase, DataSearch, ResultCard } from '@appbaseio/reactivesearch'; import logo from './logo.svg'; import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<ReactiveBase
app="indexName"
url="https://someurl.amazonaws.com"
>
<DataSearch
componentId="SearchSensor"
dataField={ "field_product:title" }
autoSuggest={true}
/>
<ResultCard
componentId="results"
dataField="field_product"
react={{
"and": ["SearchSensor"]
}}
onData={(res)=>({
"image": res.image,
"title": res.field_product:title,
"description": res.description
})}
/>
</ReactiveBase>
</div>
);
}
}
export default App;
My fields in index look somewhat as below:
{
"_index": "kirana11",
"_type": "product_autocomplete",
"_id": "66641",
"_version": 1,
"_score": 1,
"_source": {
"id": 66641,
"description": "Some Nestle Product ",
"field_product:title": "Nestle Product",
"field_product:commerce_price:amount": 83
}
In the above example, when I call fields like res.image
it works flawlessly. However, fields like field_product:title
& field_product:commerce_price:amount
returns an error as below:
Syntax error: Unexpected token, expected, (34:41)
What is the right way to access fields with a colon in it? Is there a way to escape it?
Wrap it around quotes and use bracket instead of dot notation to access the property:
res['field_product:title']
This is also how you would access a property using a variable:
const key = 'field_product:title';
res[key]
It might be better to change your json structure though:
fieldProduct: {
title: '',
commercePrice: ...
}