Help me please. I have a json file that is generated in php. I need to transfer the file to the component React js by ajax. But something goes wrong. Console writes that the error in json, but json is generated automatically. Thanks!
My code reactjs:
/*var data = [
{type: 1, tempFrom: "+5", tempTo: "+8"},
{type: 2, tempFrom: "+5", tempTo: "+8"},
{type: 3, tempFrom: "+5", tempTo: "+8"},
{type: 4, tempFrom: "+5", tempTo: "+8"}
];*/
var WeatherItem = React.createClass({
render: function() {
return (
<div className="weatherItem">
<h2 className="weatherCity">
{this.props.city}
</h2>
{this.props.children}
</div>
);
}
});
var WeatherBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="wetherBox">
<h1> Weather</h1>
<WeatherForm />
<WeatherList data={this.state.data} />
</div>
);
}
});
var WeatherList = React.createClass({
render: function() {
var weatherNodes = this.props.data.map(function(weatherItem){
return (
<WeatherItem city = {weatherItem.city} key = {weatherItem.id}>
{weatherItem.text}</WeatherItem>
);
});
return (
<div className="weatherList">
{weatherNodes}
</div>
);
}
});
var WeatherForm = React.createClass({
render: function() {
return (
<div className="weatherForm">
Hello, world! I am a WeatherForm.
</div>
);
}
});
ReactDOM.render(
<WeatherBox url="weather.php" />,
document.getElementById('content')
);
PHP:
<?php
$city = $_POST["city_id"];
$data_file = 'https://export.yandex.ru/bar/reginfo.xml?region='.$city.'.xml'; // загружаем файл прогноза погоды для выбранного города
$xml = simplexml_load_file($data_file); // загружаем xml файл через simple_xml
foreach($xml->weather->day as $day){
foreach($day->day_part as $day_part):
$img = strval($day_part->{'image-v2'});
$tempFrom = strval($day_part->temperature_from);
$tempTo = strval($day_part->temperature_to);
$attrs = $day_part->attributes();
$type= strval($attrs['type']);
echo json_encode(array("type"=>$type, "src"=>$img, "tempFrom"=>$tempFrom, "tempTo"=>$tempTo));
endforeach;
}

