CODEWITHSUNDEEP
phpjsonajaxreactjs
I.Swen
I.Swen

Reputation: 61

Connect json file from php to ReactJs

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

Upvotes: 2

Views: 2854

Answers (1)

Jose Rojas
Jose Rojas

Reputation: 3520

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

Upvotes: 2

Related Questions