Javascript nested object filtering create new object

Question

Suppose I have object

let x = { "people" :{
             "Sally": "value",
             "Bob" : "other value"
                    },
          "cars" :{
             "Saab" : "this",
             "Chevy": "that"
                    },
           "trees":{
              "Birch" : "what",
              "Oak" : "where"
                    }
                }

I want to search, so if I searched for "S" I'd get back an array that was

{ "people" :{
     "Sally": "value",
          },
  "cars" :{
     "Saab" : "this",
          }
}

And if I searched for "b" I'd get:

{ "people" :{
        "Bob" : "other value"
           },
   "trees":{
        "Birch" : "what",
           }
}

or "bo" would return

    { "people" :{
        "Bob" : "other value"
     }

And if I searched "e" I'd get

{  "cars" :{
             "Chevy": "that"
            }
}

Note that the "people" and "trees" isn't caught by the search for 'e'.

The strut will be of a fixed depth, and we only ever want to catch keys that match the filter and don't have children (we're also not interested in values that match, just keys).

Adding npm dependencies is acceptable.

Attempted solution:

    filteredList(unfiltered,searchVal) {
  return unfiltered.filter(search=> {
    return search.toLowerCase().includes(searchVal.toLowerCase())
  })
}

Obviously there's more to it, but I'm not sure which direction to proceed.

If the structure can be arbitrarily deep, you'll need to use recursion. — user47589
– user47589, Commented Apr 20, 2018 at 1:41
Just FYI, filter is an method of arrays. You have an object. — Gerardo Furtado
– Gerardo Furtado, Commented Apr 20, 2018 at 1:41
I could remove the "arbitrary depth" constraint. I was trying to think future-proof, but right now my data is consistently 5 levels deep. I will update the question, thank you @Amy. — David Little
– David Little, Commented Apr 20, 2018 at 1:44
I took that out, but, e.g. here's the head of the actual data: "Configs": { "Head Configs": { "Configuration": { "hdCfgWidth": { "Name": "Head Width", "Value": 3, .... Your solution will work, I just need to build it out to the right depth — David Little
– David Little, Commented Apr 20, 2018 at 1:53

Ender Look · Accepted Answer · 2018-04-20 02:04:37Z

4

This is a basic attempt. It's seems work quite fine but I'm very sure that it may be possible to make even better. But I don't know how.

let x = {
  "people": {
    "Sally": "value",
    "Bob": "other value"
  },
  "cars": {
    "Saab": "this",
    "Chevy": "that"
  },
  "trees": {
    "Birch": "what",
    "Oak": "where"
  }
}

let search = "B";

let result = {};

for (let key in x) {
  let tmp = {};
  for (let subKey in x[key]) {
    if (subKey.includes(search)) { // Use startsWithif you want even substring that aren't at the beginning
      tmp[subKey] = x[key][subKey];
    }
    if (Object.keys(tmp).length > 0) {
      result[key] = Object.assign({}, tmp);
    }
  }
}

console.log(result)

If you want an arbitrary deep, you should try with some kind of recursion, but that will be more complex.

edited Apr 20, 2018 at 2:04

answered Apr 20, 2018 at 1:44

Ender Look

2,4212 gold badges19 silver badges41 bronze badges

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

3 Comments

Gerardo Furtado Over a year ago

No need for a JSFiddle when you can use a stack snippet.

Ender Look Over a year ago

@GerardoFurtado Thanks!!

David Little Over a year ago

Wow. Thank you so much, that works exactly the way I was trying to do.

CRice · Accepted Answer · 2018-04-20 01:54:20Z

1

Here's a solution that uses the lodash library. Lodash has a number of super useful methods for object manipulation, in this case _.pickBy and _.mapValues can be used to filter your nested object.

Example:

let x = {
  "people": {
    "Sally": "value",
    "Bob": "other value"
  },
  "cars": {
    "Saab": "this",
    "Chevy": "that"
  },
  "trees": {
    "Birch": "what",
    "Oak": "where"
  }
}

function search(query) {
    query = query.toLowerCase();
    const matched = _.mapValues(x, v => _.pickBy(v, (_, k) => k.toLowerCase().includes(query)));
    return _.pickBy(matched, v => Object.keys(v).length)
}

console.log(search("S"))
console.log(search("b"))
console.log(search("bo"))
console.log(search("e"))

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

answered Apr 20, 2018 at 1:54

CRice

32.6k5 gold badges63 silver badges75 bronze badges

5 Comments

CRice Over a year ago

Disclaimer, the solution for "b" includes one additional result ("Saab") than your example, not sure if you meant to leave it out.

David Little Over a year ago

lol no, you're right, my "filter by eye" method missed that. This is a really neat solution! Thanks!

Ender Look Over a year ago

Use startsWith instead of includes.

CRice Over a year ago

@EnderLook Wouldn't that break OPs "e" case, which should return "Chevy" even though the match is not at the start?

Ender Look Over a year ago

@CRice, ohh, I haven't noticed that. I'm very sorry.

Collectives™ on Stack Overflow

Javascript nested object filtering create new object

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related