如何汇总值并从外部 API 中删除重复项

Question

所以我有一个 api 可以为我提供这样的足球比赛结果：

results:[
{
Group:"A"
Home: "Fc Barcelona",
Away: "Fc Porto"
Score: {
Home: 0,
Away: 0
},
{
Group:"A"
Home: "AC Milan",
Away: "Fc Barcelona"
Score: {
Home: 0,
Away: 1
},

{
Group:"A"
Home: "FC Barcelona",
Away: "AC Milan"
Score: {
Home: 2,
Away: 0
}
{
Group:"B"
Home: "Juventus",
Away: "Real Madrid"
Score: {
Home: 0,
Away: 1
}
]

等等……

除此之外，我想根据组来整理排名表，但我有团队重复，我无法根据分数从多场比赛中总结出一个团队的积分

到目前为止，我已经尝试使用我提供的代码中的 if 语句来解决它，如果有更好的解决方案，请告诉我！

<tbody v-for="result in results" :key="result.index">
    <div v-if="result.Group=='A'>
       <tr>
         <td>{{result.Home}}</td> <br> <-- i need teams to be print out once, not several times

        <td>{{result.Score.Home}}</td> <-- i need this to be 'if result.Score.Home>0 add 3 points to the adequate team and print it out here'

                        </tr>
                    </div>
                </tbody>

data () {
    return {
        results:[]
    }

mounted () {
    axios
      .get('http://localhost/soccer/results',)
      .then(response => (this.results = response.data))
}

使用示例中的代码，我将得到以下结果：

Team         Score      PTS
Fc Barcelona 0
Ac Milan 0 
Fc Barcelona 2

我需要做到这一点（不需要Score，需要根据Score计算PTS，并且像这样只打印一次团队）：

Team         Score      PTS
Fc Barcelona  N/A       3
Ac Milan      N/A       0

Answer 1

这是一个热的例子来解决你的问题（使用 console.log）。您的数据包含同一俱乐部的不同名称（巴塞罗那足球俱乐部、巴塞罗那足球俱乐部）。使用 toLowerCase/toUpperCase 或其他函数来规范化您的数据。

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

const results = [
{
Group:"A",
Home: "FC Barcelona",
Away: "FC Porto",
Score: {
Home: 0,
Away: 0
},
},
{
Group:"A",
Home: "AC Milan",
Away: "FC Barcelona",
Score: {
Home: 0,
Away: 1
},
},
{
Group:"A",
Home: "FC Barcelona",
Away: "AC Milan",
Score: {
Home: 2,
Away: 0
},
},
{
Group:"B",
Home: "Juventus",
Away: "Real Madrid",
Score: {
Home: 0,
Away: 1
}
}
]

const groupGames = groupBy(results, 'Group')


const m = new Map()

for(let key in groupGames) {
  const group = groupGames[key]
 	const results = new Map()
  
  group.forEach(game => {
  	if (!results.has(game.Home)) {
    	results.set(game.Home, { pts: 0 })
    } 
    let home = results.get(game.Home)
    
    if (!results.has(game.Away)) {
    	results.set(game.Away, { pts: 0 })
    } 
    let away = results.get(game.Away)
    
    if (game.Score.Home === game.Score.Away) {
    	home.pts += 1
      away.pts += 1
    }
    
    if (game.Score.Home > game.Score.Away) {
    	home.pts += 3
    }
    
    if (game.Score.Home < game.Score.Away) {
    	away.pts += 3
    }
  })
  
  m.set(key, results)
}

m.forEach((value, key) => {
	console.log('Group:', key)
  
  value.forEach((v, k) => {
  	console.log('Club:', k, 'Points:', v.pts)
  })
})

然后输出

Group: A
Club: FC Barcelona Points: 7
Club: FC Porto Points: 1
Club: AC Milan Points: 0
Group: B
Club: Juventus Points: 0
Club: Real Madrid Points: 3

Answer 2

与其直接处理传入的数据，不如按照方便的格式来构建模板，然后尝试编写一个函数将数据转换为该格式。

在这种情况下，我想迭代组，并让每个组都包含其团队。我以嵌套对象结束。

const axiosPromise = Promise.resolve([{
    Group: "A",
    Home: "Fc Barcelona",
    Away: "Fc Porto",
    Score: {
      Home: 0,
      Away: 0
    }
  },
  {
    Group: "A",
    Home: "AC Milan",
    Away: "Fc Barcelona",
    Score: {
      Home: 0,
      Away: 1
    }
  },
  {
    Group: "A",
    Home: "FC Barcelona",
    Away: "AC Milan",
    Score: {
      Home: 2,
      Away: 0
    }
  },
  {
    Group: "B",
    Home: "Juventus",
    Away: "Real Madrid",
    Score: {
      Home: 0,
      Away: 1
    }
  }
]);

new Vue({
  el: '#app',
  data: {
    groups: {}
  },
  mounted() {
    axiosPromise.then((results) => this.transformResults(results));
  },
  methods: {
    transformResults(axiosResults) {
      const result = {};
      axiosResults.forEach((obj) => {
        if (!(obj.Group in result)) {
          result[obj.Group] = {};
        }
        const g = result[obj.Group];
        if (!(obj.Home in g)) {
          g[obj.Home] = 0;
        }
        if (!(obj.Away in g)) {
          g[obj.Away] = 0;
        }
        g[obj.Home] += obj.Score.Home;
        g[obj.Away] += obj.Score.Away;
      });
      this.groups = result;
    }
  }
});

table {
  border-collapse: collapse;
  margin: 1rem 0;
  outline: thin solid black;
}

th,
td {
  border: thin solid gray;
  padding: 0 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(g, name) in groups">
    Group: {{name}}
    <table>
      <tr>
        <th>Team</th>
        <th>Points</th>
      </tr>
      <tr v-for="(points, name) in g">
        <template v-if="points > 0">
          <td>{{name}}</td>
          <td>{{points}}</td>
        </template>
      </tr>
    </table>
  </div>
</div>