Better way to check if array element exists in JS object?

Question

I have feature in my application that should allow users to select items in drop down menu and move them up and down. Once they select and click on the button I have to loop over the array of objects and pull only records that were selected in drop down menu. Here is example of my code:

var selectedColumns = ['first','last','city'];

var data = [
   {
      first: "Mike",
      last: "Ross",
      dob: "05/26/1978",
      city: "Washington DC",
      state: "DC",
      zip: 22904
   },
   {
      first: "John",
      last: "Henderson",
      dob: "11/06/1988",
      city: "Iowa City",
      state: "IA",
      zip: 52401
   },
   {
      first: "Nina",
      last: "Barkley",
      dob: "01/16/1968",
      city: "New York",
      state: "NY",
      zip: 11308
   },
   {
      first: "Jessie",
      last: "Kuch",
      dob: "02/02/1956",
      city: "Des Moines",
      state: "IA",
      zip: 55432
   },
   {
      first: "Jenny",
      last: "Terry",
      dob: "012/28/1988",
      city: "Miami",
      state: "FL",
      zip: 83943
   }
]

In selected column we only have first, last and city. Then I have to loop over data and pull only selected columns. One way to do that is like this:

for(var key in data){
   for(var i=0; i<selectedColumns.lenght; i++){
      var columnID = String(columns[i]);
      console.log($.trim(data[key][columnID]));
   }
}

While this solution works just fine, I'm wondering if there is better way to avoid inner loop and improve efficiency? I use JQuery/JavaScript in my project. If anyone knows a better way to approach this problem please let me know. Thank you.

Hey espresso_coffee. StackOverflow is generally for code that *doesn't* work. If your code is working as you'd like, and you're just looking for ways to *improve* it (either in how it's written, or efficiency), you may have some better luck over at **[Code Review](https://codereview.stackexchange.com/)**. — Tyler Roper, Nov 09 '18 at 19:34
@TylerRoper Thanks for letting me know. I did not know about Code Review site. — espresso_coffee, Nov 09 '18 at 19:34
Not entirely clear exactly what it is you are trying to accomplish here either. *"pull selected column"* could use better definition — charlietfl, Nov 09 '18 at 19:36
@charlietfl to pull data for the items that are selected in array. — espresso_coffee, Nov 09 '18 at 19:37
Well the code would not work with that typo..... If you can use ES6 there is a nicer way, if you can't than you can loop, just what you use to loop is up to you. — epascarello, Nov 09 '18 at 19:38
Maybe others get it....is still quite vague to me what expected results are — charlietfl, Nov 09 '18 at 19:40
@charlietfl Try to run the code that might help you understand the way it should work. — espresso_coffee, Nov 09 '18 at 19:41
@charlietfl It's like a database of people with all of the columns listed in `data`. The user can select which columns they'd like to return, ie, "I want to see everyone's first name." would be `selectedColumns = ['first']`. — Tyler Roper, Nov 09 '18 at 19:41
As Tyler mentioned, this would be better suited for Code Review. Asking for a "better way" is both asking for opinionated answers and too broad. — Taplar, Nov 09 '18 at 19:42
I'm curious why you need to create a subset of the data, a server can pick what it needs and a UI can display what it chooses? — Dominic, Nov 09 '18 at 19:42
https://stackoverflow.com/questions/25553910/one-liner-to-take-some-properties-from-object-in-es-6 — epascarello, Nov 09 '18 at 19:43
@Dominic This application is developed by someone else and I took over recently. They decided to use JSON files instead of communicating with database directly. In one had make sense because data changes only once a month. — espresso_coffee, Nov 09 '18 at 19:43
I'm voting to close this question as off-topic because it belongs on the CodeReview SE site. — pushkin, Nov 09 '18 at 19:58
@pushkin Not sure why questions has to be closed since I'm getting plenty of useful feedback from the users. — espresso_coffee, Nov 09 '18 at 19:59
@pushkin Feel free to recommend the OP post on CR but in the future, please don't use the existence of the Code Review site as a reason to close a question. Evaluate the request and use a reason like *too broad*, *primarily opinion-based*, etc. Then you can mention to the OP that it can be posted on Code Review if it is [on-topic](https://codereview.stackexchange.com/help/on-topic). Please see the section **What you should not do** in [this answer to _A guide to Code Review for Stack Overflow users_](https://codereview.meta.stackexchange.com/a/5778/120114) — Sᴀᴍ Onᴇᴌᴀ, Nov 09 '18 at 20:03
Was just typing out something similar to @SᴀᴍOnᴇᴌᴀ . A question being "better suited for Code Review" is not reason enough **on its own** for a closure vote. And it's not to pick on pushkin at all, I simply see it so frequently and feel that reinforcing this can't be stressed enough. :) — Tyler Roper, Nov 09 '18 at 20:06

Nikhil Aggarwal · Accepted Answer · 2018-11-09T20:01:44.223

4

You can use Array.map, Array.reduce and Object.assign

var selectedColumns = ['first','last','city'];
var data = [{first: "Mike",last: "Ross",dob: "05/26/1978",city: "Washington DC",state: "DC",zip: 22904},{first: "John",last: "Henderson",dob: "11/06/1988",city: "Iowa City",state: "IA",zip: 52401},{first: "Nina",last: "Barkley",dob: "01/16/1968",city: "New York",state: "NY",zip: 11308},{first: "Jessie",last: "Kuch",dob: "02/02/1956",city: "Des Moines",state: "IA",zip: 55432},{first: "Jenny",last: "Terry",dob: "012/28/1988",city: "Miami",state: "FL",zip: 83943}];

let result = data.map(o => selectedColumns.reduce((a,c) => Object.assign(a,{[c]:o[c]}), {}));
console.log(result);

EDIT

var selectedColumns = ['dob','last','city'];
var data = [{first: "Mike",last: "Ross",dob: "01/01/1900",city: "Washington DC",state: "DC",zip: 22904},{first: "John",last: "Henderson",dob: "11/06/1988",city: "Iowa City",state: "IA",zip: 52401},{first: "Nina",last: "Barkley",dob: "01/16/1968",city: "New York",state: "NY",zip: 11308},{first: "Jessie",last: "Kuch",dob: "02/02/1956",city: "Des Moines",state: "IA",zip: 55432},{first: "Jenny",last: "Terry",dob: "012/28/1988",city: "Miami",state: "FL",zip: 83943}];

let result = data.map(o => selectedColumns.reduce((a,c) => {
  if(c === 'dob' && o[c] === '01/01/1900') a[c] = 'N/A';
  else a[c] = o[c];
  return a;
}, {}));
console.log(result);

edited Nov 09 '18 at 20:01

answered Nov 09 '18 at 19:37

Nikhil Aggarwal

26,884
3
37
53

Is there a way to manipulate with the data in this solution. For example: check if column is equal to `dob` and value is `01/01/1900` then I want to show `N/A`. – espresso_coffee Nov 09 '18 at 19:50
@espresso_coffee - yes. You can update `[c]:o[c]` to`[c]: c=== 'dob' && o[c] === '01/01/1900' ? 'N/A' :o[c]` – Nikhil Aggarwal Nov 09 '18 at 19:53
What about `if` statement and `else if`? Can I just use that in the same lines? – espresso_coffee Nov 09 '18 at 19:54
1

@espresso_coffee - You can use if else as well. e.g. in place of `Object.assign(...)`, you can have `{a[c] = o[c]; return a;}`. Now in this block you can place any check – Nikhil Aggarwal Nov 09 '18 at 19:56
Can you please update your example and use `if` `else if` just to better understand the code. Thank you! – espresso_coffee Nov 09 '18 at 19:58
@espresso_coffee - Added if/else case – Nikhil Aggarwal Nov 09 '18 at 20:02
One more thing that I'm trying to figure out is how to properly place the data in `tr` and `td` html elements? I'm trying to build the table. – espresso_coffee Nov 12 '18 at 16:48
@espresso_coffee - That is a very broad question and can have different answers provided on framework used, jquery used, etc. I would request you to post a separate question for the same – Nikhil Aggarwal Nov 13 '18 at 07:01

score 1 · Answer 2 · answered Nov 09 '18 at 19:40

1

Another important thing to mention is that it's generally a bad idea to use for ... in construct to iterate over array items in JavaScript (see Why is using "for...in" with array iteration a bad idea? for some explanations).

answered Nov 09 '18 at 19:40

shkaper

3,514
1
15
31

Nina Scholz · Answer 3 · 2018-11-09T19:50:48.747

Just a single line of code by mapping the wanted properties.

Array#map for getting a new array of data and for mapping the wanted keys as new objects witk
computed property names and the value, assigned to a single object with
Object.assign and
spread syntax ... for taking an array as arguments.

var selectedColumns = ['first','last','city'],
    data = [{ first: "Mike", last: "Ross", dob: "05/26/1978", city: "Washington DC", state: "DC", zip: 22904 }, { first: "John", last: "Henderson", dob: "11/06/1988", city: "Iowa City", state: "IA", zip: 52401 }, { first: "Nina", last: "Barkley", dob: "01/16/1968", city: "New York", state: "NY", zip: 11308 }, { first: "Jessie", last: "Kuch", dob: "02/02/1956", city: "Des Moines", state: "IA", zip: 55432 }, { first: "Jenny", last: "Terry", dob: "012/28/1988", city: "Miami", state: "FL", zip: 83943 }],
    result = data.map(o => Object.assign(...selectedColumns.map(k => ({ [k]: o[k] }))));
    
console.log(result);

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

score 0 · Answer 4 · answered Nov 09 '18 at 19:37

You will find Array.filter suits this use-case

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => {
    return word.length > 6;
});

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

score 0 · Answer 5 · answered Nov 09 '18 at 19:41

You could look into using filters where you build the filtering method based on the search criteria and return the filtered array.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const newArr = oldArr.filter(record => record.first === 'Nina')
//newArr would only have Nina's record

alternatively if you are trying to go by having a particular field you can still use filter as well

var newArr2 = data.filter(record => record.hasOwnProperty('first'))
// newArr2 would have all records with the property name

Better way to check if array element exists in JS object?

5 Answers5