React js Вложенный массив L oop - PullRequest
Новая
       22

React js Вложенный массив L oop

0 голосов
/ 18 февраля 2020

Привет, мне нужен nelp для следующего json массива l oop. Мне нравится этот Instagram или пост в Facebook. У меня есть json вложенный массив. Я попробовал приведенный ниже код, но он мне не помог. Мне нужно посмотреть как этот пост Instagram ниже Прикрепленное изображение.

Я хочу получить профиль, лайки, комментарии, подробности публикации отдельно через l oop

Вывод: (например, если l oop через Record1 означает, что он получает все вложенные элементы, такие как ( profile, Post..et c)). Распечатывает вывод, как показано ниже image

Records1: сообщение в профиле likedetails commentdetails
Records2: сообщение в профиле likedetails commentdetails
Records3: сообщение в профиле likedetails commentdetails
Records4: сообщение в профиле likedetails комментарийdetails
Records5: сообщение в профиле likedetails комментарий commentdetails 

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);
        })
    });

Just like above image

ex: codepen: https://codepen.io/dotnet345/pen/oNXBxBM

Ответы [ 4 ]

0 голосов
/ 26 февраля 2020 
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 => {
              })
             })
          })
        })
      })
   })
0 голосов
/ 18 февраля 2020

Хорошо.

Вы можете следовать этому коду 

    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>
    )
}
0 голосов
/ 18 февраля 2020

Поскольку у вас есть вложенный массив до l oop через, вы можете попробовать метод ниже, чтобы получить значения лайков, комментарии и другие детали каждого reocrd.

Это может быть не лучшим способом решения , Но я уверен, что это поможет вам. Спасибо. 

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

В приведенном выше фрагменте вы можете напрямую получить значения свойств, обратившись к item.propertyName.

ex: item.Post

0 голосов
/ 18 февраля 2020

Вы имели в виду что-то подобное? Просмотр карты 

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})
        });
...