将json文件从php连接到ReactJs

Question

请帮助我。我有一个在php中生成的json文件。我需要通过ajax将文件传输到组件React js。但有些事情出错了。控制台写道，在json中的错误，但json是自动生成的。谢谢！

我的代码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; 
} 

Answer 1

尝试添加标题您的回复，表示是JSON内容，通过阵列的回声结果不会是有效的JSON，重构哟你的代码如下：

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