Reduce Array to objects that share certain property: values

Question

> Everything is in here: https://jsfiddle.net/qr6hdbx0/

This is my code:

var viewport = {
    width: 'undefined',
    height: 'undefined',
    ratio: 1.7
};

var bg_1280x720 = {
    name: 'RZ_BG_1280x720_16-9.png',
    width: '1280',
    height: '720',
    ratio: 1.7
};

var bg_1920x1080 = {
    name: 'RZ_BG_1280x720_16-9.png',
    width: '1280',
    height: '720',
    ratio: 1.7
};

var bg_2000x2000 = {
    name: 'RZ_BG_2000x2000_1-1.png',
    width: '2000',
    height: '2000',
    ratio: 1
};

bgOverlays = [
bg_1280x720,
bg_1920x1080,
bg_2000x2000
]

I need a script, that looks at: viewport.ratio and then looks at the .ratio: values of all the objects in: bgOverlays and then creates a new array that has only the objects in it, that are closest to: viewport.ratio , in terms of their: .ratio: value .

The expected result in this example would be: newArray [bg_1280x720, bg_1920x1080]

I don't know how to do this, I found tutorials that show, how to reduce an array to only one value, that is closest to a given value, but in my case there might be two object in the array that have the same value, and I didn't get it to work… – I would very much appreciate any sort of input. Thank You! – Simon

Answer 1

The logic is to make an array of the differences between the .ratio values of viewpoint from each object, thus finding the smallest number from that and matching that value with what makes that value in the array of objects.. hope I didn't confuse anyone

 var viewport = { width: 'undefined', height: 'undefined', ratio: 1.6 }; var bg_1280x720 = { name: 'RZ_BG_1280x720_16-9.png', width: '1280', height: '720', ratio: 1.7 }; var bg_1920x1080 = { name: 'RZ_BG_1280x720_16-9.png', width: '1280', height: '720', ratio: 1.7 }; var bg_2000x2000 = { name: 'RZ_BG_2000x2000_1-1.png', width: '2000', height: '2000', ratio: 1 }; bgOverlays = [ bg_1280x720, bg_1920x1080, bg_2000x2000 ] // I need a script, that looks at: "viewport.ratio" and then looks at the ".ratio: values" of all the objects in: "bgOverlays" and then creates a new array that has only the objects in it, that are closest to: "viewport.ratio", in terms of their: ".ratio: value". // example: // viewport.ratio = 1.1 output: newArray[bg_2000x2000] // viewport.ratio = 2 output: newArray[bg_1280x720, bg_1920x1080] //well here you go:) var low=bgOverlays.map(a=>Math.abs(a.ratio-viewport.ratio)).sort((a,b)=>ab)[0] var newArray=bgOverlays.filter(a=>Math.abs(a.ratio-viewport.ratio)==low) console.log(newArray)

Answer 2

From what i understood, you consider -0.1 to 0.1 as close ratio values, I'm gonna use a variable that you can change based on what you consider 'close' values.

 var viewport = { width: 'undefined', height: 'undefined', ratio: 1.7 }; const gapThatIConsiderClose = 0.1 var bg_1280x720 = { name: 'RZ_BG_1280x720_16-9.png', width: '1280', height: '720', ratio: 1.7 }; var bg_1920x1080 = { name: 'RZ_BG_1280x720_16-9.png', width: '1280', height: '720', ratio: 1.7 }; var bg_2000x2000 = { name: 'RZ_BG_2000x2000_1-1.png', width: '2000', height: '2000', ratio: 1 }; function closerRatioObjects(){ return bgOverlays.filter(obj => obj.ratio <= viewport.ratio + gapThatIConsiderClose && obj.ratio >= viewport.ratio - gapThatIConsiderClose) } bgOverlays = [ bg_1280x720, bg_1920x1080, bg_2000x2000 ] console.log(closerRatioObjects())