Load date by request fetch() - reactjs

Question

I have got a JSON file and I want to call it by fetch() request. My JSON looks like this:
{
id: { hotelId: "102835", provider: { provider_id: "23", dmnid: 3984 } },
hotelinfo: {
name: "Pera Rose Hotel",
hotelsearch: {
realname: "Pera Rose Hotel",
hotelid: 0.0,
hotelimage: "",
webserviceimage:
"http://service.stage.Paximum.com/media/images/product/2/1/2/2/102835-fed561d75dec40ca4d83fd6fc9da9967-jpg/pera_rose_hotel.jpg",
countryid: 1002247,
ecountryname: "Turkey",
ecityname: "Istanbul",
cityid: 1177676,
star: 4,
desc:
"This hotel is located in the Istanbul's business, shopping and entertainment centre, around a 5-minute walk from the historical Galata Tower, the world's second oldest subway and some 8 minutes' walk away from Taksim Square. In Taksim itself, around 5 minutes' walk from the hotel, guests will find restaurants, bars, shops and clubs. The nearest underground station is Taksim-Meydan, a 10-minute walk away and guests will find the Hagia Sophia, the Topkapi Palace, the Grand Bazaar and the Egyptian Market all around a 15-minute ride away by public transport, as is Sirkeci Station. Istanbul Airport is around 15 km away.",
enable: "",
delete: ""
},
information: { viewname: "-" }
}
}
But my setState function is not executing and there is this error:
SyntaxError: "JSON.parse: expected ',' or '}' after property value in
object at line 1 column 549 of the JSON data"
And it is because of fieldd desc. As you can see there are some words in desc such as Istanbul's which have '. Is there any way to solve this problem?
(When I use ajax() request to load json.bc file there is no error.)
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
library: null,
perPage: 20,
currentPage: 1,
maxPage: null,
filter: ""
};
}
componentDidMount() {
fetch("/json.bc", {
method: "POST",
body: "cityid=[##cms.form.cityid##]"
})
.then(response => response.text())
.then(text => {
var Maindata = JSON.parse(text.replace(/\'/g, '"'));
this.setState(
state => ({
...state,
data: Maindata
}),
() => {
this.reorganiseLibrary();
}
);
})
.catch(error => console.error(error));
}
reorganiseLibrary = () => {
const { filter, perPage, data } = this.state;
let library = data;
if (filter !== "") {
// ...
}
library = _.chunk(library, perPage);
this.setState({
library,
currentPage: 1,
maxPage: library.length === 0 ? 1 : library.length
});
};
previousPage = event => {
this.setState({
currentPage: this.state.currentPage - 1
});
};
nextPage = event => {
this.setState({
currentPage: this.state.currentPage + 1
});
};
handlePerPage = evt =>
this.setState(
{
perPage: evt.target.value
},
() => this.reorganiseLibrary()
);
renderLibrary = () => {
const { library, currentPage } = this.state;
if (!library || (library && library.length === 0)) {
return <div class="nodata">No Result</div>;
}
return library[currentPage - 1]
.sort((a, b) => a.total - b.total)
.map((item, i) => <div class="item">{item.id}</div>);
};
render() {
const { library, currentPage, perPage, maxPage } = this.state;
return (
<div className="Main-wrapper">
<div className="wrapper-data">{this.renderLibrary()}</div>
<ul id="page-numbers">
<li class="nexprev">
{currentPage !== 1 && (
<button onClick={this.previousPage}>
<span class="fa-backward" />
</button>
)}
</li>
<li class="controls active">{this.state.currentPage}</li>
<li class="controls">{this.state.maxPage}</li>
<li class="nexprev">
{currentPage < maxPage && (
<button onClick={this.nextPage}>
<span class="fa-forward" />
</button>
)}
</li>
</ul>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("Result"));

Answer 1

Replace the single quotes inside double quotes string with ' html entity, then replace single quotes with double quotes and lastly (optional) replace single quotes html entity with single quotes.
function stringToJSON(str) {
// convert single qoute inside double qoutes to html entity
const singleQuoteToEntity = str.replace(/"[^"]+"/g, function(m) {
return m.replace(/\'/g, ''');
});
const replaceSingleQuotes = singleQuoteToEntity.replace(/\'/g, '"');
return replaceSingleQuotes.replace(/'/g, '\'');
}
const jsonString = "{ 'id': { 'hotelId': '102835', 'provider': { 'provider_id': '23', 'dmnid': 3984 } }, 'hotelinfo': { 'name': 'Pera Rose Hotel', 'hotelsearch': { 'realname': 'Pera Rose Hotel', 'hotelid': 0.0, 'hotelimage': '', 'webserviceimagine': 'http://service.stage.Paximum.com/media/images/product/2/1/2/2/102835-fed561d75dec40ca4d83fd6fc9da9967-jpg/pera_rose_hotel.jpg', 'countryid': 1002247, 'ecountryname': 'Turkey', 'ecityname': 'Istanbul', 'cityid': 1177676, 'star': 4, 'desc': \"This hotel is located in the Istanbul's business, shopping and entertainment centre, around a 5-minute walk from the historical Galata Tower, the world's second oldest subway and some 8 minutes' walk away from Taksim Square. In Taksim itself, around 5 minutes' walk from the hotel, guests will find restaurants, bars, shops and clubs. The nearest underground station is Taksim-Meydan, a 10-minute walk away and guests will find the Hagia Sophia, the Topkapi Palace, the Grand Bazaar and the Egyptian Market all around a 15-minute ride away by public transport, as is Sirkeci Station. Istanbul Airport is around 15 km away.\", 'enable': '', 'delete': '' }, 'information': { 'viewname': '-' } } }";
console.log(JSON.parse(stringToJSON(jsonString)))
In your App component you do the following
class App extends React.Component {
....
stringToJSON = (str) => {
// convert single qoute inside double qoutes to html entity
const singleQuoteToEntity = str.replace(/"[^"]+"/g, function(m) {
return m.replace(/\'/g, ''');
});
const replaceSingleQuotes = singleQuoteToEntity.replace(/\'/g, '"');
return replaceSingleQuotes.replace(/'/g, '\'');
}
componentDidMount() {
fetch("/json.bc", {
method: "POST",
body: "cityid=[##cms.form.cityid##]"
})
.then(response => response.text())
.then(text => {
var Maindata = JSON.parse(this.stringToJSON(text));
this.setState(
state => ({
...state,
data: Maindata
}),
() => {
this.reorganiseLibrary();
}
);
})
.catch(error => console.error(error));
}
....