React js嵌套循环数组

Question

嗨，我需要 nelp 来跟踪 json 数组循环。它喜欢那个 instagram 或 facebook 帖子。我有一个 json 嵌套数组。我尝试了下面的代码，但对我没有帮助。我需要像 instagram 帖子下面所附图片那样的视图。

我想通过循环分别获取个人资料、喜欢、评论、发布详细信息

输出：（例如，如果循环通过 Record1 意味着它得到所有嵌套项目，如（profile，Post..etc））。它打印输出如下图

记录1： 轮廓 邮政 喜欢细节 评论详情
记录2： 轮廓 邮政 喜欢细节 评论详情
记录3： 轮廓 邮政 喜欢细节 评论详情
记录4： 轮廓 邮政 喜欢细节 评论详情
记录5： 轮廓 邮政 喜欢细节 评论详情

render() {
  var Json={
     "AllPost":[
        {
           "User_Id":1,
           "Username":"te",
           "Records":[
              {
                 "Profile":[{
                    "User_Id":"1",
                    "UserImage":"",
                    "Fullname":"Test",
                    "Username":"te"
                 }],
                 "Post":[{
                    "Post_Id":"1",
                    "UploadFile":"",
                    "Post_Caption":"Test",
                    "User_Id":"1"
                 }],
                 "likedetails":[{
                    "Post_Id":"1",
                    "LikeCount":"345"
                 }],
                 "commentdetails":[
                    {
                       "Comments":"testA",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testB",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testC",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testD",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testE",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    }
                 ]
              }
           ]
        },
        {
           "User_Id":2,
           "Username":"te",
           "Records":[
              {
                 "Profile":[{
                    "User_Id":"2",
                    "UserImage":"",
                    "Fullname":"Test",
                    "Username":"te"
                 }],
                 "Post":[{
                    "Post_Id":"2",
                    "UploadFile":"",
                    "Post_Caption":"Test",
                    "User_Id":"2"
                 }],
                 "likedetails":[{
                    "Post_Id":"12",
                    "LikeCount":"3452"
                 }],
                 "commentdetails":[
                    {
                       "Comments":"testA",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testB",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testC",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testD",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testE",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    }
                 ]
              }
           ]
        },
        {
           "User_Id":3,
           "Username":"te",
           "Records":[
              {
                 "Profile":[{
                    "User_Id":"3",
                    "UserImage":"",
                    "Fullname":"Test3",
                    "Username":"te3"
                 }],
                 "Post":[{
                    "Post_Id":"3",
                    "UploadFile":"",
                    "Post_Caption":"Test",
                    "User_Id":"3"
                 }],
                 "likedetails":[{
                    "Post_Id":"3",
                    "LikeCount":"345"
                 }],
                 "commentdetails":[
                    {
                       "Comments":"testA",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testB",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testC",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testD",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testE",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    }
                 ]
              }
           ]
        },
        {
           "User_Id":4,
           "Username":"te",
           "Records":[
              {
                 "Profile":[{
                    "User_Id":"4",
                    "UserImage":"",
                    "Fullname":"Test4",
                    "Username":"te4"
                 }],
                 "Post":[{
                    "Post_Id":"4",
                    "UploadFile":"",
                    "Post_Caption":"Test4",
                    "User_Id":"4"
                 }],
                 "likedetails":[{
                    "Post_Id":"4",
                    "LikeCount":"3454"
                 }],
                 "commentdetails":[
                    {
                       "Comments":"testA",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testB",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testC",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testD",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testE",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    }
                 ]
              }
           ]
        },
        {
           "User_Id":5,
           "Username":"te",
           "Records":[
              {
                 "Profile":[{
                    "User_Id":"5",
                    "UserImage":"",
                    "Fullname":"Test5",
                    "Username":"te5"
                 }],
                 "Post":[{
                    "Post_Id":"5",
                    "UploadFile":"",
                    "Post_Caption":"Test5",
                    "User_Id":"5"
                 }],
                 "likedetails":[{
                    "Post_Id":"5",
                    "LikeCount":"3455"
                 }],
                 "commentdetails":[
                    {
                       "Comments":"testA",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testB",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testC",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testD",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    },
                    {
                       "Comments":"testE",
                       "Username": "te",
                       "Comment_Date":"12-12-12"
                    }
                 ]
              }
           ]
        }
     ]
  }


let arr=[];
Object.keys(Json.AllPost).forEach((records, index) => {

        Json.AllPost[records].forEach((obj, idx) => {
           arr.push(obj);
           console.log(arr);
        })
    });

例如： codepen:https://codepen.io/dotnet345/pen/oNXBxBM

Answer 1

const renderData = Json.AllPost.map((user) => {
      return user.Records.map(record =>{
        return record.Profile.map(profile =>{
           return  record.Post.map(post =>{
              return record.likedetails.map(like => {
                 return record.commentdetails.map(comment => {
              })
             })
          })
        })
      })
   })

Answer 2

由于你有嵌套数组要循环，你可以尝试下面的方法来获取每个reocrd的值like、cmets和其他详细信息。

这可能不是最好的解决方法。但我相信它会对你有所帮助。谢谢。

Json.AllPost.map( post => 
Object.values(post).map( record => 
record.map( item => 
console.log(item))))

在上面的sn-p中可以直接通过访问item.propertyName来获取属性值。

例如：item.Post

Answer 3

好的。

你可以关注这个代码

    state={
    instagramPost: [],
}

componentDidMount() {
    const BASE_URL = 'https://www.instagram.com/'userName'/?__a=1';
    Axios.get(BASE_URL)
        .then((res) => {
            console.log(res.data.graphql.user.edge_owner_to_timeline_media.edges[0].node.edge_media_to_caption.edges[0].node)
            this.setState({d: res.data.graphql.user.edge_owner_to_timeline_media.edges})
        });
        }

render() {
    const { instagramPost } = this.state;
    return (
        <React.Fragment>
            {
    instagramPost && instagramPost.map((user, i) => (
    <div key={i}>
    <img alt="" src={user.node.edge_media_to_caption.edges[0].node.text}/>
    <div>{user.node.edge_media_to_caption.edges[0].node.text}</div>
                               </div>
    ))
            }
        </React.Fragment>
    )
}

Answer 4

你的意思是这样的吗？ Card view

const BASE_URL = 'https://www.instagram.com/'userName'/?__a=1';
    Axios.get(BASE_URL)
        .then((res) => {
            console.log(res.data.graphql.user.edge_owner_to_timeline_media.edges[0].node.edge_media_to_caption.edges[0].node)
            this.setState({d: res.data.graphql.user.edge_owner_to_timeline_media.edges})
        });