通过ReactJS访问JSON中的数组 [英] Get access to array in JSON by ReactJS
问题描述
我使用ReactJS从JSON文件中获取数据
I use ReactJS to get data from a JSON file
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo Fetch</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var DataBlock = React.createClass({
getInitialState:function(){
return {data:[]};
},
componentDidMount:function() {
var a=this;
$.getJSON(this.props.url, function(data) {
a.setState({data:data})
});
},
render: function() {
console.log(this.state);
return (
<div>
<h1>Sample data block</h1>
<h3>{this.state.data.movies[0].title}</h3>
</div>
);
}
});
React.render(
<DataBlock url="small_data.json"/>,
document.getElementById('content')
);
</script>
</body>
</html>
这是JSON文件 small_data.json
{
"movies": [
{
"abridged_cast": [
{
"characters": [
"Dominic Toretto"
],
"id": "162652472",
"name": "Vin Diesel"
},
{
"characters": [
"Brian O'Conner"
],
"id": "162654234",
"name": "Paul Walker"
}
],
"synopsis": "Continuing the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and Kurt Russell.",
"title": "Furious 7",
"year": 2015
}
],
"runtime": 140
}
既不显示 title 也不显示任何其他内容。但是当我尝试在JSON文件中显示非数组对象时，比如 runtime ，我只使用 {this.state.data.runtime} ，它按预期显示，但如何才能访问电影数组？我以为我使用正确的语法来检索数组。如果它不是这样的，真正的是什么？如何从JSON中的数组中的对象获取数据并存储在ReactJS中的变量中？
Neither title nor anything else is displayed. But when I try to display a non-array object in JSON file, like runtime, I just use {this.state.data.runtime}, it shows as expected, but how can I get access to movies array? I thought I use proper syntax to retrive the array. If it's not like this, what is the true one? How can I get data from objects in array in JSON and store in variables in ReactJS?
推荐答案
我认为你正试图实现这样的目标，正确： http://codepen.io/zvona/pen/BoQVoj？编辑= 001
I think you're trying to achieve something like this, right: http://codepen.io/zvona/pen/BoQVoj?editors=001
return (
<div>
<h1>Sample data block</h1>
{this.state.data.movies.map(function(movie, i) {
return <h3 key={'movie-'+ i}>{movie.title}</h3>
})}
</div>
);
它遍历电影数组并且 .map（）返回要显示的每部电影的值。
It loops through the movies array and .map() returns the value for each movie to be displayed.
这篇关于通过ReactJS访问JSON中的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
