Combining values and eliminating duplicates from an external API: A step-by-step guide

Question

Combining values and eliminating duplicates from an external API: A step-by-step guide

My API provides soccer game results in this format:

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

However, I am facing issues with team duplicates and calculating points. I want to generate standings tables based on groups but can't sum up points of a team from multiple games using scores.

I have tried using if statements as shown in the code snippet provided, but it's not giving me the desired output. If you have a better solution, please share!

<tbody v-for="result in results" :key="result.index">
    <div v-if="result.Group=='A'>
       <tr>
         <td>{{result.Home}}</td> <br> <-- need each team to be printed only once

        <td>{{result.Score.Home}}</td> <-- logic needed to calculate and display points here based on score

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

data () {
    return {
        results:[]
    }

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

The current output shows duplicated teams with their respective scores:

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

However, my goal is to display teams along with their total points like this:

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

javascript api vue.js ecmascript-6

Answer 1

Answer №1

For resolving your issue, here is an illustration utilizing console.log. Your dataset comprises varying names for the same club (Fc Barcelona, FC Barcelona). Utilize functions like toLowerCase or toUpperCase for standardizing your data.

const groupBy = function(items, keyField) {
  return items.reduce(function(result, item) {
    (result[item[keyField]] = result[item[keyField]] || []).push(item);
    return result;
  }, {});
};

const gamesData = [
{
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 groupedGames = groupBy(gamesData, 'Group')


const mapResults = new Map()

for(let gKey in groupedGames) {
  const groupValue = groupedGames[gKey]
 const resultsMap = new Map()
  
  groupValue.forEach(game => {
  if (!resultsMap.has(game.Home)) {
    resultsMap.set(game.Home, { pts: 0 })
    } 
    let homeTeam = resultsMap.get(game.Home)
    
    if (!resultsMap.has(game.Away)) {
    resultsMap.set(game.Away, { pts: 0 })
    } 
    let awayTeam = resultsMap.get(game.Away)
    
    if (game.Score.Home === game.Score.Away) {
    homeTeam.pts += 1
      awayTeam.pts += 1
    }
    
    if (game.Score.Home > game.Score.Away) {
    homeTeam.pts += 3
    }
    
    if (game.Score.Home < game.Score.Away) {
    awayTeam.pts += 3
    }
  })
  
  mapResults.set(gKey, resultsMap)
}

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

Lastly, the output would be:

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

For resolving your issue, here is an illustration utilizing console.log. Your dataset comprises varying names for the same club (Fc Barcelona, FC Barcelona). Utilize functions like toLowerCase or toUpperCase for standardizing your data.

const groupBy = function(items, keyField) {
  return items.reduce(function(result, item) {
    (result[item[keyField]] = result[item[keyField]] || []).push(item);
    return result;
  }, {});
};

const gamesData = [
{
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 groupedGames = groupBy(gamesData, 'Group')


const mapResults = new Map()

for(let gKey in groupedGames) {
  const groupValue = groupedGames[gKey]
 const resultsMap = new Map()
  
  groupValue.forEach(game => {
  if (!resultsMap.has(game.Home)) {
    resultsMap.set(game.Home, { pts: 0 })
    } 
    let homeTeam = resultsMap.get(game.Home)
    
    if (!resultsMap.has(game.Away)) {
    resultsMap.set(game.Away, { pts: 0 })
    } 
    let awayTeam = resultsMap.get(game.Away)
    
    if (game.Score.Home === game.Score.Away) {
    homeTeam.pts += 1
      awayTeam.pts += 1
    }
    
    if (game.Score.Home > game.Score.Away) {
    homeTeam.pts += 3
    }
    
    if (game.Score.Home < game.Score.Away) {
    awayTeam.pts += 3
    }
  })
  
  mapResults.set(gKey, resultsMap)
}

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

Lastly, the output would be:

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 3

Answer №2

Instead of processing the data in real-time, create a template based on the expected format and then develop a function to convert the incoming data into that structure.

In my scenario, I aimed to group the data by teams within their respective groups, resulting in nested objects.

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>

Answer 4

Instead of processing the data in real-time, create a template based on the expected format and then develop a function to convert the incoming data into that structure.

In my scenario, I aimed to group the data by teams within their respective groups, resulting in nested objects.

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>

Combining values and eliminating duplicates from an external API: A step-by-step guide

Answer №1

Answer №2

Similar questions

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

Is it possible to modify the colors within a JavaScript string?

Achieving stylish CSS effects on dynamically loaded content post AJAX request

Sending an array of dictionary objects to a JavaScript function

Troubleshooting: :before element not being hidden by jQuery slidetoggle()

What is the reason for the failure of this react ternary return statement?

Encountering an "undefined is not a function" error across all libraries

Building a table in Quasar by utilizing nested objects

Are there any testing frameworks available for JavaScript that are similar to Junit and specifically designed for testing object-oriented JavaScript within Node

Guide to designing a bar graph using HTML5 for a web app optimized for iPad

ridiculing callback within parameter

Tips for preventing HTML ID clashes while integrating with the Document Object Model of external websites

Angular 4 - Automatically scroll to specific list item based on search query input

Dropdown Pattern with React CTA Modal

Attempting to start and restart an asynchronous function using setIntervalAsync results in a TypeError because undefined or null cannot be converted to an

Utilize JavaScript to append elements to an array in each loop iteration, gradually building a single, unified

Extract the text content from an HTML file while ignoring the tags to get the substring

Creating a square shape in Twitter Bootstrap to frame an item on a webpage

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

JS problem with using for and foreach loops in Node.js