Iterate in inner array from json response

Question

I have this json response and i want to render post_comment field .

response.json :

{
    "id": 2,
    "tags": [],
    "post_comment": [
        {
            "id": 2,
            "author_comment": 45,
            "comment_body": "xgdgfdf",
            "created_date": "2018-06-13T12:55:52.460282Z",
            "post": 2
        },
        {
            "id": 3,
            "author_comment": 45,
            "comment_body": "asdsasd",
            "created_date": "2018-06-13T13:45:01.535194Z",
            "post": 2
        },
        {
            "id": 4,
            "author_comment": 45,
            "comment_body": "asdsasdDasdasdasdasdasdadadadadadaaaaaaaaaaaaaadddddddd",
            "created_date": "2018-06-13T13:46:18.721375Z",
            "post": 2
        },

    ],
    "url": "http://127.0.0.1:8000/api/post/2/",
    "author_name": "",
    "title": "god of war",
    "body": "this is the god of war ..I Fdfwfdwdfound the solution, i just have to tell django to try connecting using the original backend if the user isnt a student or professor. just add 'django.sdfdsdfsfsfsy",

    "slug": "god-of-war",
    "publish_date": "2018-06-12T10:27:07.100113Z",
    "author": 45
}

and this is my postDetailomponent :

class postDetailComponent extends Component {

  componentDidMount(){
    this.props.fetchPostDetail(this.props.match.params.id);

  }

  render(){
    const { post } = this.props;
    if (!post) {
      return <div>loading </div>;
    }
    return (
      <div className='container' >
        <h1>{post.title}</h1>
        <p>{post.body}</p>
        <h6>{post.publish_date}</h6>
        <h6>{post.tags}</h6>
        <div >


    );

  }
}
function mapStateToProps(state) {
  return { post: state.postDetail.post};
}

I tried map through the post_comment but it react says :

const comments = post.post_comment.map((comment) => <li>{comment.comment_body}</li>);

Uncaught TypeError: Cannot read property 'map' of undefined

so how can I iter in json?my whole point is : all of my data is there and renders correctly but I cant render post_comment cause this is an multi object. even I tried set key to my comments .but did not work correctly.

@Tony function mapStateToProps(state) { return { post: state.postDetail.post}; } ... problem is not the post .just inner json object is not rendering. — Babak Abadkheir
– Babak Abadkheir, Commented Jun 17, 2018 at 14:10

Rohith Murali · Accepted Answer · 2018-06-17 15:40:11Z

3

Change the maping statement as,

let comments=[];
if(this.props.post.post_comment && this.props.post.post_comment.length>0)
  comments = this.props.post.post_comment.map((comment) => <li>{comment.comment_body}</li>);

Initially before the api call this props value will be undefined, so handling that condition should solve the problem.

edited Jun 17, 2018 at 15:40

answered Jun 17, 2018 at 14:29

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Babak Abadkheir Over a year ago

Uncaught TypeError: Cannot read property 'length' of undefined

Babak Abadkheir Over a year ago

no . if (this.props.post_comment && this.props.post_comment.length>0){ comments = post.post_comment.map((comment) => <li>{comment.comment_body}</li>); } . no errors .but not rendering in page with this tag <h6>{comments}</h6>

Rohith Murali Over a year ago

How are you passing the props value for post_comment to this component??

Babak Abadkheir Over a year ago

{post: state.postDetail.post } . so i pass the post with this : const { post } = this.props; . and post renders. look at my code exactly is the same in my project.

Rohith Murali Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Iterate in inner array from json response

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related