如何访问 JSON 对象数组中的对象？答案

【问题标题】：How to access objects inside an array of JSON object?如何访问 JSON 对象数组中的对象？
【发布时间】：2019-08-25 19:57:59
【问题描述】：

我正在尝试访问 JSONObject 数组中的对象并打印其值。

我可以使用 console.log 将数组打印为 JSONObject。但是我无法访问数组中的值，这些值又是 JSONObject 格式。以下是我的 JSONObject

{
    "id": 4,
    "meta": {
        "type": "pagetype",
            "title": "Home"
        }
    },
    "title": "Expose data to frontend",
    "subtitle": "We will be exposing the content to the frontend",
    "content": [
        {
            "type": "full_richtext",
            "value": "<p><b>Bold body</b></p>"
        },
        {
            "type": "button",
            "value": {
                "button_text": "Google",
                "button_url": "https://google.com"
            }
        }
    ]
}

我需要访问数组“内容”中的值并为

打印值

"value" -- Bold body --
"button_text"
"button_url"

我试过如下

    class App extends React.Component {
       constructor() {
          super();
          this.state = {
             'items': []
          }
       }
       componentDidMount() {
          fetch('http://localhost:8000/api/v2/pages/4/')
             .then(results => results.json())
             .then(results => this.setState({ 'items': results }));
          }

          render() {
             var contents_from_wagtail = this.state.items;
             var streamfield_content_array = contents_from_wagtail.content;
             console.log(streamfield_content_array); //prints array of objects

             return (
                <React.Fragment>
                    <p>{this.state.items.subtitle}</p>
                    <p>{this.state.items.title}</p>
                    /* print the values for 
                      "value" -- Bold body --
                      "button_text"
                      "button_url"
                    */
                </React.Fragment>
             );
         }
      }
 export default App;

【问题讨论】：

标签： json reactjs

【解决方案1】：

当显示一个项目数组时，.map 方法可用于创建多个元素：

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            'items': {}
        }
    }
    componentDidMount() {
        fetch('http://localhost:8000/api/v2/pages/4/')
            .then(results => results.json())
            .then(results => this.setState({ 'items': results }));
    }

    render() {
        var contents_from_wagtail = this.state.items;
        var streamfield_content_array = contents_from_wagtail.content || [];
        console.log(streamfield_content_array); //prints array of objects

        return (
            <React.Fragment>
                <p>{this.state.items.subtitle}</p>
                <p>{this.state.items.title}</p>
                {streamfield_content_array.map((item, index) => {
                    return <div key={index}>type: {item.type} <p>{item.value}</p></div>
                })}
            </React.Fragment>
        );
    }
}
export default App;

【讨论】：

它说 'streamfield_content_array' 未定义。
感谢您的努力，但它仍然说“对象作为 React Child 无效”。我认为这是因为我们在这里对数组以外的对象使用 .map 函数..

【解决方案2】：

要在渲染中访问它，您必须有条件地访问它，因为在执行 fetch 调用之前不会为第一次渲染设置它

这就是为什么您必须在加载数组之前提供一些回退。例如，检查项目是否未定义并返回 null。

只有当数组被填满时，才会渲染欲望输出，它应该没问题。希望这可以帮助。编码愉快。

【讨论】：

【解决方案3】：

您可以使用.map() 和.filter() 的组合来迭代内容数组中的项目。看起来您只想显示具有type 或button 的项目。所以尝试这样的事情：

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         'items': []
      }
   }
   componentDidMount() {
      fetch('http://localhost:8000/api/v2/pages/4/')
         .then(results => results.json())
         .then(results => this.setState({ 'items': results }));
      }

      render() {
         var contents_from_wagtail = this.state.items;
         var streamfield_content_array = contents_from_wagtail.content;
         var buttonContent = this.state.items ? this.state.items.content.filter((item) => item.type == "button") : null

         return (
            <React.Fragment>
                <p>{this.state.items.subtitle}</p>
                <p>{this.state.items.title}</p>
                 { buttonContent && buttonContent.map(item => (
                    <div>
                       <p>{item.button_text}</p>
                       <p>{item.button_url}</p>
                    </div>
                 ))}
            </React.Fragment>
         );
     }
  }
 export default App;

【讨论】：