0

I have seasons object and selectedSeasonIds which holds data whether selected key is selected or not.

I'm refactoring the array to object data structure for better performance.

I want to render ONLY selected season while I have these data

seasons  = {30: 'Fall', 31: 'Spring', 32: 'All'}

selectedSeasonIds = {30: true, 31: false, 32: true}

let output = selectedSeasonIds.????
// {30: 'Fall', 32: 'All'} <- This is my goal

I used the selector to select the selected objects. But I don't see any benefit of using it.Please feel free to use my code or create better one. Here is my snippet of my code

Here is my selector. 

const getSeasons = (seasons, selectedSeasonIds) => {
  const selectedSeasons = _.filter(
    seasons,
    season => _.includes(selectedSeasonIds, season.id)
  );
  return selectedSeasons;
}

I'm getting selected objects from selector

selectedSeasons = SelectedSeasonsSelector(this.state) << getting selector
if(selectedSeasons.length==0) {
    return '-'
}
let seasonList = selectedSeasons.map((season) => {
    return ' '+season.value;
})
return seasonList

Thanks!!!

Farhan Yaseen
  • 2,507
  • 2
  • 22
  • 37
merry-go-round
  • 4,533
  • 10
  • 54
  • 102
  • Why would an object look-up be more performant than an array look-up? – Teemu Nov 07 '17 at 05:54
  • Because object look-up is much faster than array look up. I had an issue with slow Touchable Opacity. Hopefully after refactoring it solves the problem :) – merry-go-round Nov 07 '17 at 05:55
  • I'm pretty sure it is not faster, in JS everything is possible, though. – Teemu Nov 07 '17 at 05:56
  • Here you see it's about 50 times faster than array search. https://stackoverflow.com/questions/17295056/array-vs-object-efficiency-in-javascript – merry-go-round Nov 07 '17 at 05:56
  • My array search takes about 1000ms, hopefully it goes down to about 100ms. – merry-go-round Nov 07 '17 at 05:57
  • 1
    The accepted answer in the linked post starts with "_The short version: Arrays are mostly faster than objects ..._". Afaik the only exception of this is a sparse array, which you should avoid anyway. Maybe you better to ask what's wrong/how to improve the slow array search you have ..? – Teemu Nov 07 '17 at 06:02
  • Good point. But I don't understand because the rest of answer shows only the case for fast object search. – merry-go-round Nov 07 '17 at 06:06
  • Now I'm confused. – merry-go-round Nov 07 '17 at 06:08
  • 1
    There has to be something wrong in your array search. Just for an example, I daily use an old hta, which reads a 500 kB JSON file from an intranet server, checks, whether it has exactly the same data as an exisiting variable, creates a 2D array (~3000x15) from the data, searches for a string from a column, stores all the matching strings and finally creates an unique drawing number. All this within 60 - 70 milliseconds, and with IE, which is not the fastest browser in the west. – Teemu Nov 07 '17 at 08:18
  • Actually you were right. I just finished the refactoring and it didn't improve my performance. This is quite frustrating. Is it ok for me to open another question for you? I will post it tomorrow, and I need your help!!! :) – merry-go-round Nov 07 '17 at 08:43
  • You can very well post another question (not only for me, though), since it's totally another topic, though the data would be the same. I forgot to mention in my previous comment, that the process also decodes urlencoded content of the entire array too. – Teemu Nov 07 '17 at 08:50
  • I didn't recognize this problem on my emulator but when I tested on my actual device, it's soooo laggy. It takes 1 second to finish the process. Thanks. I will let you know soon. – merry-go-round Nov 07 '17 at 09:05
  • @Teemu I hope you can help me on this problem. https://stackoverflow.com/questions/47162106/touchableopacity-takes-about-1000ms-can-you-diagnose-my-code – merry-go-round Nov 07 '17 at 15:51
  • I'm sorry, but I'm totally handless with React. – Teemu Nov 07 '17 at 16:57
  • It's cool. have a good day – merry-go-round Nov 07 '17 at 16:58
  • maybe bring your friends who know React :) – merry-go-round Nov 07 '17 at 16:59

2 Answers2

1

You can use array#reduce and put a condition to only add those values in output which have true in selectedSeasonIds.

const seasons  = {30: 'Fall', 31: 'Spring', 32: 'All'};
const selectedSeasonIds = {30: true, 31: false, 32: true};
let output = Object.keys(selectedSeasonIds).reduce((r,k) => {
  if(selectedSeasonIds[k])
    r[k] = seasons[k] || '';
  return r;
}, {});
console.log(output);
Hassan Imam
  • 21,956
  • 5
  • 41
  • 51
0

The keys in an object are accessible properties and can be gotten like so:

selectedSeasonIds = {30: true, 31: false, 32: true}
Object.keys(selectedSeasonIds); //Gets an array of keys
for (let key in selectedSeasonIds){//Iterate through the keys};

Afterwards it should be trivial to access the selected seasons.

Jeremy Myers
  • 159
  • 6