How to reorder an API call to a custom order by API ID?-CodePudding

A bit of a niche question but it has challenged me, see if you can solve it.

I have this array of sports leagues ranked from best to worst by their respective API IDs.

const arrOrderedLeague = [1, 2, 3, 4, 5, 6, 7, 9, 10, 29, 30, 31, 32, 33, 
    34, 39, 45, 48, 140, 142, 135, 137, 78, 81, 61, 65, 66, 88,
    94, 96, 253, 203, 262, 179, 185, 144, 188, 169, 40, 41, 42,
    43, 235, 207, 218, 141, 136,333, 307, 197, 62, 79, 80, 128, 
    130, 292, 98, 101, 103, 106, 113, 119, 283, 71, 73, 265, 239, 211, 89 ]

All though the number 89 is lower than 211, 211 is the better league.

The issue is when I call the API it follows a random order. I am considerably weak when it comes to arrays so how would I make it follow the order I want?

Extra Info:

This is a console.log of the API Call, as you can see, league 73 is logged before 262, but since league 262 comes earlier in my array than 73, I want it to be logged ahead, this likely requires making a new array with some function unknown to me but I'm not sure what it is.

2: Object { fixture: {…}, league: {…}, teams: {…}, … }

fixture: Object { id: 854430, referee: "Savio Pereira Sampaio, Brazil", timezone: "UTC", … }

goals: Object { home: 3, away: 0 }

league: Object { **id: 73**, name: "Copa Do Brasil", country: "Brazil", … }

score: Object { halftime: {…}, fulltime: {…}, extratime: {…}, … }

teams: Object { home: {…}, away: {…} }

<prototype>: Object { … } 

3: Object { fixture: {…}, league: {…}, teams: {…}, … }

fixture: Object { id: 861506, referee: "Jorge Antonio Perez Duran, Mexico", timezone: "UTC", … }

goals: Object { home: 1, away: 2 }

league: Object { **id: 262**, name: "Liga MX", country: "Mexico", … }

score: Object { halftime: {…}, fulltime: {…}, extratime: {…}, … }

teams: Object { home: {…}, away: {…} }

<prototype>: Object { … }

Less Needed but here is the API Call itself:

const settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://v3.football.api-sports.io/fixtures?date=2022-05-13",
    "method": "GET",
    dataType: 'json',
    "headers": {
        "X-RapidAPI-Host": "v3.football.api-sports.io",
        "X-RapidAPI-Key": "API-KEY"
    }
};
$.ajax(settings).done(function (data) {

    const newArr = data.response.filter(el => arrWant.includes(el.league.id));
    console.log(newArr)
    });

If you need any clarification please leave a comment, thanks for anyone who even tries!

Json Of Response (I think idk though)

CodePudding user response：

I've got your solution, but there's an issue: The API endpoint you're reaching isn't returning all the leagues you want. It is returning 302 items, but only 16 of them match some of the 69 league IDs you've specified.

Nonetheless, in order to achieve the order you want, you can:

Fetch the data
Map over your desired IDs, returning the corresponding item from the API response. If it doesn't exist, this field will be undefined
Filter out all the undefined values

const desiredOrder = [
    1, 2, 3, 4, 5, 6, 7, 9, 10, 29, 30, 31, 32, 33, 34, 39, 45, 48, 140, 142, 135, 137, 78, 81, 61, 65, 66, 88, 94, 96, 253, 203, 262, 179, 185,
    144, 188, 169, 40, 41, 42, 43, 235, 207, 218, 141, 136, 333, 307, 197, 62, 79, 80, 128, 130, 292, 98, 101, 103, 106, 113, 119, 283, 71, 73,
    265, 239, 211, 89,
];

const run = async () => {
    // Make the request
    const res = await fetch('https://v3.football.api-sports.io/fixtures?date=2022-05-13', {
        headers: {
            'X-RapidAPI-Host': 'api-football-v1.p.rapidapi.com',
            // Take my API key idc
            'X-RapidAPI-Key': '9e4b7483aa00fa65f63f96c52c184754',
        },
    });

    // Convert response body to JSON and grab the "response" property (array)
    const json = (await res.json())?.response;

    // Loop through the desired IDs and for each return the corresponding API response item
    const ordered = desiredOrder.map((id) => json.find(({ league }) => league?.id === id));

    // Remove duplicate (undefined) values to shorten array, then filter out all undefineds
    const filtered = [...new Set(ordered)].filter(item => item !== undefined)

    console.log(filtered);
};

run();

Though this array is not the same length as the desiredOrder array (due to the API not returning all the desired data), it maintains the order desired.