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

I added that in the fiddle: jsfiddle.net/qr6hdbx0 (at the bottom) — Simon R.
– Simon R., Commented Jan 1, 2021 at 19:11
@iota In this case it would be: newArray [bg_1280x720, bg_1920x1080] — Simon R.
– Simon R., Commented Jan 1, 2021 at 19:12
It's better to put all the relevant information in the question. — Unmitigated
– Unmitigated, Commented Jan 1, 2021 at 19:12
@iota Sorry, I had to make manual breaks in the question to show that, and stackoverflow didn't register the breaks… The formatting looked really confusing, that's why. — Simon R.
– Simon R., Commented Jan 1, 2021 at 19:15

The Bomb Squad · Accepted Answer · 2021-01-01 19:47:07Z

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)=>a-b)[0]

var newArray=bgOverlays
  .filter(a=>Math.abs(a.ratio-viewport.ratio)==low)
console.log(newArray)

Abdelillah Aissani · Accepted Answer · 2021-01-01 19:53:46Z

0

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

answered Jan 1, 2021 at 19:53

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

1 Comment

Simon R. Over a year ago

This is not exactly what I wanted to do… Sorry, If I didn't explain it well enough: There should never be a max. gap, it should always select, whatever is closest, no matter the gap. What TheBombSquad answered is exactly what I needed, still, thank you very much, for your answer!

Collectives™ on Stack Overflow

Reduce Array to objects that share certain property: values

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related