Как посчитать данные массива в массиве вact.js?

Question

Я пытаюсь подсчитать общее количество комментариев по этим комментариям, но он учитывает только 2 данных, я использую res.data.length, и я не знаю, как подсчитать только 5 данных, которые являются только комментариями внутри комментариев, яозначает, что он должен считать 5 данных, но он учитывает только 2 данных

здесь 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
    }

здесь код

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

    }

Answer 1

Расширяю мой комментарий решением. Перейдите ко второму примеру, чтобы просмотреть решение для кода, который вы только что отредактировали

// 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

Использование в вашем сценарии:

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

Вы можете проверить следующие статьи MDN:
Основы JavaScript и Массивы