Filter Object Array values based on user input

Question

I want to filter the object array values based on user input.

This is the jsfiddle:

// Copied from https://github.com/tc39/proposal-object-values-entries/blob/master/polyfill.js
const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
const isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable);
const concat = Function.bind.call(Function.call, Array.prototype.concat);
const keys = Reflect.ownKeys;
if (!Object.values) {
  Object.values = function values(O) {
    return reduce(keys(O), (v, k) => concat(v, typeof k === 'string' && isEnumerable(O, k) ? [O[k]] : []), []);
  };
}

// Copied code ends here;

let data = {
  Belgien: [{
    code: "BRU",
    name: "Bryssel",
    aliases: "Bryssel,BRU,Belgien"
  }],
  Cypern: [{
      code: "LCA",
      name: "Larnaca",
      aliases: "Larnaca,LCA,Cypern,Ayia Napa,Protaras,Fig Tree Bay,Larnaca"
    },
    {
      code: "PFO",
      name: "Paphos",
      aliases: "Paphos,PFO,Cypern"
    }
  ]
}

let userInput = "lar";

let filteredData = Object.values(data).map(values => values.filter(value =>
  value.name.toLowerCase().indexOf(userInput) !== -1));

console.log(filteredData);

The issue is that I get the values properly filtered, but I do not get the keys associated with these values, in this example the countries.

Thanks in advance.

Sorry, I do not have a lot of experience posting questions on stackoverflow. This is the link: jsfiddle.net/kaa5omox/24 — srdjanRakic
– srdjanRakic, Commented Mar 16, 2018 at 14:37
Added polyfill as Object.values was throwing error. If not required, please revert the edit — Rajesh Dixit
– Rajesh Dixit, Commented Mar 16, 2018 at 14:45
let filtered = Object.keys(data).map(countryName => { const matches = data[countryName].filter(val => val.name.toLowerCase().match(userInput)); return matches.length ? ({[countryName]: matches}) : null; }).filter(v => v) — Zlatko
– Zlatko, Commented Mar 16, 2018 at 14:52

Ele · Accepted Answer · 2018-03-16 14:54:09Z

1

You can use the function reduce and filter the data using the functions filter and indexOf.

This alternative uses the function Object.keys to be able to recover the desired key.

let data = {  Belgien: [{    code: "BRU",    name: "Bryssel",    aliases: "Bryssel,BRU,Belgien"  }],  Cypern: [{      code: "LCA",      name: "Larnaca",      aliases: "Larnaca,LCA,Cypern,Ayia Napa,Protaras,Fig Tree Bay,Larnaca"    },    {      code: "PFO",      name: "Paphos",      aliases: "Paphos,PFO,Cypern"    }  ]},
    userInput = "lar",
    filteredData = Object.keys(data).reduce((a, k) => {
      a[k] = data[k].filter(({name}) => name.toLowerCase().indexOf(userInput) > -1);
      return a;
    }, {});

console.log(filteredData);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Mar 16, 2018 at 14:54

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nina Scholz · Accepted Answer · 2018-03-16 15:06:32Z

1

You could iterate over the keys and return an object with only filtered data.

var data = { Belgien: [{ code: "BRU", name: "Bryssel", aliases: "Bryssel,BRU,Belgien" }], Cypern: [{ code: "LCA", name: "Larnaca", aliases: "Larnaca,LCA,Cypern,Ayia Napa,Protaras,Fig Tree Bay,Larnaca" }, { code: "PFO", name: "Paphos", aliases: "Paphos,PFO,Cypern" }] },
    userInput = "lar",
    filteredData = Object.keys(data).reduce((r, k) => {
        var temp = data[k].filter(({ name }) => name.toLowerCase().includes(userInput));
        if (temp.length) {
            r[k] = temp;
        }
        return r;
    }, {});

console.log(filteredData);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Mar 16, 2018 at 15:06

answered Mar 16, 2018 at 14:54

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Ayoub · Accepted Answer · 2018-03-16 15:10:25Z

1

You could get the job done using Object.entries like this:

let filteredData = Object.entries(data).reduce((acc, values) => {
  const value = values[1].filter(value =>
      value.name.toLowerCase().indexOf(userInput) !== -1),
    key = values[0];
  acc[key] = value;
  return acc;
}, {});

edited Mar 16, 2018 at 15:10

answered Mar 16, 2018 at 14:56

Ayoub

1,43514 silver badges24 bronze badges

Collectives™ on Stack Overflow

Filter Object Array values based on user input

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related