Loop through infinitely nested object & Construct string

Question

I'm using this query component in one of my projects so that users can construct a query.

I'm having difficulty parsing it into an actual example query, for example for this object outputted by the component:

const queryParams = {
  "rules": [
    {
      "rules": [
        {
          "field": "firstName",
          "value": "John",
          "operator": "="
        },
        {
          "field": "lastName",
          "value": "Doe",
          "operator": "="
        }
      ],
      "combinator": "and"
    },
    {
      "rules": [
        {
          "field": "age",
          "value": "20",
          "operator": "="
        },
        {
          "field": "address",
          "value": "London",
          "operator": "="
        }
      ],
      "combinator": "and"
    }
  ],
  "combinator": "and"
}

I need to create a function that would output a more user-friendly readable output as such:

((FirstName = John AND LastName = Doe) AND (AGE = 20 AND Address = London))

I've given it a go but the difficulty I'm finding is that:

The object could theoretically be infinitely nested, I never know how nested it is. Is the only way to do this with recursion? Or are there easier ways
The rules and groups can be in the same object

The way I'm currently trying will not work dynamically, so any help or guidance would be greatly appreciated.

Thanks

"object could theoretically be infinitely nested" - using for loop should overcome this issue, did you try any recursions? Share your code — Code_Tech
– Code_Tech, Commented Feb 8, 2019 at 10:52
You can always use a loop and a stack (LIFO) structure to simulate recursion if you decide to go that way. This (non-JS) explanation is pretty straightforward: refactoring.com/catalog/replaceRecursionWithIteration.html ... (although if you want to get into that wacky recursion stuff, this seems like a great JS tutorial: javascript.info/recursion) — Cat
– Cat, Commented Feb 8, 2019 at 10:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

You could take a recursive approach and build either a rules set or a final comparison.

It works by checking the rules property:

If given, then the rules are mapped with a recursive call of the function.

The result of this call is joined with an upper case combinator property and wrapped into a wanted spaced string with parenthesis.
If not, then take a new string with field, operator and value property.

function combine(object) {
    return 'rules' in object
        ? `(${object.rules.map(combine).join(` ${object.combinator.toUpperCase()} `)})`
        : `${object.field} ${object.operator} ${object.value}`;
}

var data = { rules: [{ rules: [{ field: "firstName", value: "John", operator: "=" }, { field: "lastName", value: "Doe", operator: "=" }], combinator: "and" }, { rules: [{ field: "age", value: "20", operator: "=" }, { field: "address", value: "London", operator: "=" }], combinator: "and" }], combinator: "and" },
    result = combine(data);

console.log(result);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 8, 2019 at 11:08

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

4 Comments

cнŝdk Over a year ago

Really nice approach, but it would be better with an explanation. ;)

Alen.Toma Over a year ago

This is really a dump component, its missing the field type :) so we could identify if the field is string, int etc

Nina Scholz Over a year ago

@Alen.Toma, i think it's just to visualise to the user in a simplified style what's happening.

WillKre Over a year ago

Correct @NinaScholz - Thank you for the solution this is great

Collectives™ on Stack Overflow

Loop through infinitely nested object & Construct string

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related