获取键值对的嵌套对象计数

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

需要注意的是，我在这里list.map((item,index) =>{})中添加了 index 作为在map()函数中接收并在{item.group}(remaining: {remaining[index]})中使用该索引的额外参数