如何使用 Reactjs 从 json 中获取数据答案

【问题标题】：How to fetch data from json using Reactjs如何使用 Reactjs 从 json 中获取数据
【发布时间】：2016-07-13 17:47:09
【问题描述】：

我知道这是非常基本的。但如果有人能帮助我了解如何使用 React js 从 json 获取数据，我将不胜感激。我刚刚开始学习 React，所以很想知道是否有任何方法可以使用它从复杂的 json 中获取数据。

我已尝试关注 React 教程

我正在尝试从 json 中的第二级键获取数据。我可以使用 Object.keys 来做到这一点，但是当我尝试将其应用于我的数据集时，我不确定这里的问题是什么。当我尝试与其他数据集没有什么不同的注释数据集时，我什么也得不到。 Object.keys 可以应用于有多个键的数据集吗？有人可以帮忙吗？

请查看我的fiddle

这是我的代码

var SearchStock = React.createClass({

  getInitialState: function() {
    return {searchString: ''};
  },

  handleChange: function(e) {
    this.setState({searchString: e.target.value});
  },

  render: function() {
    var stocks = this.props.items, searchString = this.state.searchString.trim().toLowerCase();

    if (searchString.length > 0) {
      stocks = stocks.filter(function(l) {
        // return l.name.toLowerCase().match(searchString);
        return l[Object.keys(l)[0]]["name"].toLowerCase().match(searchString);
      });
    }

    return <div >
      < input type = "text" value = {this.state.searchString} onChange = {this.handleChange} placeholder = "Type here" / >
      < ul > 
      {stocks.map(function(l) {
            return <li > {l[Object.keys(l)[0]]["name"]} < /li>
            // return <li > {l[Object.keys(l)[0]]["name"]} < /li>
        })
      } 
      < /ul> 
    < /div>;
  }
});

// var stocks = [{"F": {"symbol": "F", "name": "Ford Motor", "bidPrice": 13.41, "askPrice": 13.36}}, {"GE": {"symbol": "GE", "name": "General Electric", "bidPrice": 32.33, "askPrice": 32.39}}, {"JNJ: {"symbol": "JNJ", "name": "Johnson \u0026 Johnson", "bidPrice": 121.0, "askPrice": 123.0,}}];

var stocks = [{"symbol": {"symbol": "F", "name": "Ford Motors"}, "name": "Ford Motor", "bidPrice": 13.41, "askPrice": 13.36}, {"symbol": {"symbol": "GE", "name": "General Electronics"}, "name": "General Electric", "bidPrice": 32.33, "askPrice": 32.39}, {"symbol": {"symbol": "JNJ", "name": "Johnson \u0026 Johnson"}, "name": "Johnson \u0026 Johnson", "bidPrice": 121.0, "askPrice": 123.0,}];

ReactDOM.render( < SearchStock items = {stocks} />,document.getElementById('container'));

我的目标是构建一个简单的单页应用程序，我们可以在其中使用 key.symbol 从 json 中搜索数据，因此我将向数据添加另一个级别，以便在构建我的 api 时我可以使用符号。

如果有人能帮我解决这个问题，我将不胜感激。很抱歉在中间更改了我的问题。感谢您为我指明正确的方向。

【问题讨论】：

我无法理解如何在不知道第一个键值的情况下访问第二级键值。 - 这是您要查找的 (stackoverflow.com/questions/16576457/…) 吗？跨度>
感谢您向我指出这一点。
@Luksprog 有什么办法可以忽略第一级键并直接检查第二级键吗？请查看jsfiddle。在这里我想使用data0。现在我看着它。我真的不关心第一级密钥的价值。很抱歉之前提出了不正确的问题，感谢我在 javascript 中学到了一些新东西。注意：我知道我可以使用上面链接中提到的 data.forEach( function ( m ) 方法来获得这个。但我正在寻找更简单的东西，比如 json.{}.key。抱歉，我通常使用 python，我知道它有可能。
@Luksprog 我尝试在循环中使用 for，但它没有用。我不确定为什么逻辑似乎是合理的。这是我的fiddle。也许我以错误的方式处理这个问题。我也会在上面更新我的帖子。
@Luksprog 谢谢，我能够解决它。

标签： reactjs

【解决方案1】：

在 Stock 元素的 componentDidMount 方法中实现。

类似这样的：

var Stock = React.createClass({
  ...
  render: function() {
  ...
  },
  componentDidMount: function() {
    let url = 'myStockApi/' + this.props.symbol;
    this.serverRequest = $.get(url, function(result) {
      let quote = result;
      this.setState({
        quote
      });
    }.bind(this));
  },
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },
});

查看文档here。

【讨论】：

非常感谢！这适用于虚拟 url 数据，稍后会帮助我。一旦我构建了我的 api，我将尝试了解它的细节。我已经更新了我的帖子。现在我需要正确地从 json 中获取嵌套数据，如果你能回答我的查询，我将不胜感激。

【解决方案2】：

我能够从 here 找到我的答案。我已经更新了我的帖子。请检查我帖子中的代码。

【讨论】：