Question

我正在尝试访问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;

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

更多.map示例：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Answer 2

您可以结合使用.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;

Answer 3

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

这就是为什么在数组加载之前必须提供一些后备功能的原因。只需检查项是否未定义并返回null例如即可。

仅当数组被填充时，才会渲染所需的输出，并且应该没问题。希望这可以帮助。编码愉快。

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

3 个答案: