2

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;
}

Error

enter image description here

2
  • It seems like the response is not JSON, is an error produced for the server. Could you inspect the response from Network tab? Commented Nov 15, 2016 at 19:20
  • I added photo. The json file can be seen Commented Nov 15, 2016 at 19:29

1 Answer 1

2

Try adding header to your response to indicate is JSON content, echo by array the result won't be a valid JSON, refactor your code this way:

<?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

$result = array();

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']);
  $result[] = array("type"=>$type, "src"=>$img, "tempFrom"=>$tempFrom, "tempTo"=>$tempTo);

  endforeach;
}

header('Content-Type: application/json');
echo json_encode($result);
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.