Получить количество вложенных объектов пары ключ-значение

Question

Я создаю приложение React и у меня следующий список:

const list = [
    {
        id: '1',
        group: 'sports 1',
        sports: [{
            'basketball': [
                {competed: true},
                {won: false}
            ],
            'soccer': [
                {competed: false},
                {won: false}
            ],
            'hockey': [
                {competed: false},
                {won: false}
            ]
        }],
        competedInAll: false
    },
    {
        id: '2',
        group: 'sports 2',
        sports: [{
            'tennis': [
                {competed: false},
                {won: false}
            ],
            'swimming': [
                {competed: false},
                {won: false}
            ],
            'baseball': [
                {competed: false},
                {won: false}
            ]
        }],
        competedInAll: false
    },
    {
        id: '3',
        group: 'sports 3',
        sports: [{
            'volleyball': [
                {competed: true},
                {won: false}
            ],
            'karate': [
                {competed: true},
                {won: false}
            ],
            'surfing': [
                {competed: true},
                {won: false}
            ]
        }],
        competedInAll: false
    }
];

Я перебираю список следующим образом:

<ul>
    {list.map(item => (
        <li key={item.id}>
           {item.group}
           <ul>
               {Object.keys(item.sports[0]).map((sport, i) => <li key={i}>{sport}</li>)}
           </ul>
        </li>
    ))}
</ul>

, который выдаст следующий вывод:

• спорт 1
  • баскетбол
  • футбол
  • хоккей
• спорт 2
  • теннис
  • плавание
  • бейсбол
• спорт 3
  • волейбол
  • каратэ
  • серфинг

Я хочу достичь:

• спорт 1 (2 осталось)
  • баскетбол
  • футбол
  • хоккей
• спорт 2 (3 осталось)
  • теннис
  • плавание
  • бейсбол
• спорт 3 (соревноваться во всех видах спорта)
  • волейбол
  • каратэ
  • серфинг

1. Как я могу получить общее число competed, равное false (сгруппированное) в каждом из sports?
2. Как я могу установить для этого счетчика «соревнования во всех видах спорта» (сгруппированные), когда все они установлены на true?

Answer 1

const getStatus = (item) => {
  let length = Object.values(item.sports[0]).filter(x => !x[0].competed).length;
  /* 
  A more readable version below 
  let sports = item.sports[0];
  let sportDetails = Object.keys(sports);
  let notCompetedSports = sportDetails.filter(sport => sport[0].competed === false);
  let length = notCompletedSports.length'
  */
  return length === 0 ? 'competed in all sports' : length+" remaining"
}

<ul>
    {list.map(item => (
        <li key={item.id}>
           {item.group} ({getStatus(item)})
           <ul>
               {Object.keys(item.sports[0]).map((sport, i) => <li key={i}>{sport}</li>)}
           </ul>
        </li>
    ))}
</ul>

Answer 2

render(){
//here I put list in render but you can place in your code as you need
  const list = [
    {
      id: '1',
      group: 'sports 1',
      sports: [{
          'basketball': [
              {competed: true},
              {won: false}
          ],
          'soccer': [
              {competed: false},
              {won: false}
          ],
          'hockey': [
              {competed: false},
              {won: false}
          ]
      }],
      competedInAll: false
    },

    {
      id: '2',
      group: 'sports 2',
      sports: [{
          'tennis': [
              {competed: false},
              {won: false}
          ],
          'swimming': [
              {competed: false},
              {won: false}
          ],
          'baseball': [
              {competed: false},
              {won: false}
          ]
      }],
      competedInAll: false
    },

    {
      id: '3',
      group: 'sports 3',
      sports: [{
          'volleyball': [
              {competed: true},
              {won: false}
          ],
          'karate': [
              {competed: true},
              {won: false}
          ],
          'surfing': [
              {competed: true},
              {won: false}
          ]
      }],
      competedInAll: false
    }
  ];

  let remaining = [] // remaining variable is empty list we will push the number of remaining items which are false in the same sequence as our list item are. 

  //this loop is used to find out the number of completed = false and push in remaining list
  for(var i=0; i<list.length; i++){
    let count = 0;
    for (var key in list[i].sports[0]){
      if(!list[i].sports[0][key][0].competed){
        count = count + 1 
      }
    }
    remaining.push(count);
  }
  //loop end here

  return (
    <div>
      <ul>
        {list.map((item,index) => (
          <li key={item.id}>
            {item.group}(remaining: {remaining[index]})
            <ul>
              {Object.keys(item.sports[0]).map((sport, i) => <li key={i}>{sport}</li>)}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  )
}

Что следует отметить, я добавил index здесь list.map((item,index) =>{}) в качестве дополнительного параметра для получения в функции map() и использования этого индекса в {item.group}(remaining: {remaining[index]})