how to count array data inside array in react.js?

Question

I'm trying to count total of comment from these comments, but it only count 2 data, I am using res.data.length, and I don't know how to count only 5 data which is only comment inside comments, I mean it should count 5 data but it only count 2 data

here json

{
        "comments": [
            {
                "comment": "comment 1.1"
            },
            {
                "comment": "comment 1.2"
            }
        ],
        "date": "2019-10-22T20:21:04.927Z",
        "_id": "5daf65c8bcaab30224def48f",
        "caption": "caption 1",
        "picture": "https://ichef.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg",
        "__v": 0
    },
    {
        "comments": [
            {
                "comment": "comment 2.1"
            },
            {
                "comment": "comment 2.1"
            }
            {
                "comment": "comment 2.1"
            },
        ],
        "date": "2019-10-23T05:30:16.210Z",
        "_id": "5dafe7876688d3064073eed0",
        "caption": "ini caption 2",
        "picture": "https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg",
        "__v": 0
    }

here the code

componentDidMount() {
        const url = "http://localhost:5000/api/comments/";
        axios.get(url).then(res => {
          this.setState({
              isLoaded: true,
              comments: res.data,
              countComment: res.data.length
          })
        })      

    }

That's ok, because you have 2 objects inside your array. res.data[0] = first 'comments' with 2 comments and res.data[1] = second 'comments' with 3 comments. This is a simple JS question and not that much related to reactjs or even axios. For getting the total amount of comments (5) you need to iterate through your res.data[i] and count 'comments' length. — Nicolas Hevia
– Nicolas Hevia, Commented Oct 31, 2019 at 2:42
Welcome to Stackoverflow. First, try not to post pictures of your code, rather paste the relevant parts of the code and use the code formatting button to format it properly. Second, make sure that the relevant code is included. — Vincent Ramdhanie
– Vincent Ramdhanie, Commented Oct 31, 2019 at 2:44
When possible, try to submit actual code, rather than screenshots of code. — David Chopin
– David Chopin, Commented Oct 31, 2019 at 2:47

Community · Accepted Answer · 2020-06-20 09:12:55Z

Expanding my comment with a solution. Go to the second example to view a solution for the code you just edited

// simulate axios response
const res = {} 
res.data = [
  {
    comments: [
      {
        comment: 'comment 1.1'
      },
      {
        comment: 'comment 1.2'
      }
    ],
    caption: 'caption 1'
  },
  {
    comments: [
      {
        comment: 'comment 2.1'
      },
      {
        comment: 'comment 2.2'
      },
      {
        comment: 'comment 2.3'
      }
    ],
    caption: 'caption 2'
  }
]

let commentCount = 0
// iterate through each item, you need this
res.data.forEach(data => {
  commentCount += data.comments.length
})
console.log(commentCount) // 5

Usage in your scenario:

componentDidMount() {
  const url = "http://localhost:5000/api/comments/";
  axios.get(url).then(res => {
    let commentCount = 0 
    res.data.forEach(data => {
      commentCount += data.comments.length
    })
    this.setState({
        isLoaded: true,
        comments: res.data,
        countComment: commentCount
    })
  })      
}

You can check these MDN articles:
JavaScript object basics and Arrays

Collectives™ on Stack Overflow

how to count array data inside array in react.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related