Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

Javascript convert Json to an array string format

I would like to convert json to a string "filter" format and visa versa.

Json Format

{
 "condition": "and",
 "rules": [
 {
 "field": "Name",
 "operator": "=",
 "value": "Jack"
 },
 {
 "field": "UserId",
 "operator": "=",
 "value": 2
 },
 {
 "field": "Surname",
 "operator": "=",
 "value": "Rose"
 },
 {
 "condition": "or",
 "rules": [
 {
 "field": "Code",
 "operator": "=",
 "value": "X"
 },
 {
 "field": "Type",
 "operator": "=",
 "value": "Z"
 }
 ]
 }
 ]
};

String Filter Format

[
 ["Name","=", "Jack"],
 ["and"],
 ["UserId", "=", 2],
 ["and"],
 ["Surname","=", "Rose"]
,
["and"],
(
["Code","=","X"],
["or"],
["Type","=","Z"]
)
]

At the moment I have the following js code which outputs something that is halfway there, but I'm missing the "and" and "or" conditions which need to come between the respective fields as well as the "(" ")" brackets around to group the fields.

I need to be able to convert from json to the "filter" format and back again.

This is the code I have so far: query in this case is the json I posted above.

const query={condition:"and",rules:[{field:"Name",operator:"=",value:"Jack"},{field:"UserId",operator:"=",value:2},{field:"Surname",operator:"=",value:"Rose"},{condition:"or",rules:[{field:"Code",operator:"=",value:"X"},{field:"Type",operator:"=",value:"Z"}]}]};
const parseRule = (rule) => {
 
 if (rule.rules) {
 return rule.rules.map(r=> parseRule(r));
 }
 
 return [rule.field, rule.operator, rule.value];
};
let filterFormat = parseRule(query);
console.log(filterFormat);

I'm stuck here. I almost need something like a join for arrays where the condition can be added as an array between the other arrays, without losing the arrays like you would with a normal join.

Answer*

The part I think you already succeeded at is going from the rule object tree to the nested array format. I wrote it using 3 main functions:

 - `childToArray` only checks whether a node is a `condition` or a `rule` and forwards to the right parser function
 - `ruleToArray` takes the object and transforms it in to a tuple-like array
 - `conditionToArray` maps all nested children and interweaves them with the `operator`

For interweaving, I use a utility method that basically does this:

```
 (a, [1, 2, 3]) -> [1, a, 2, a, 3]
```

```js
const childToArray = child => "condition" in child 
 ? conditionToArray(child)
 : ruleToArray(child);

const ruleToArray = ({ field, operator, value }) => [field, operator, value];
const conditionToArray = ({ condition, rules }) =>
 interweave(
 [ condition ],
 rules.map(childToArray)
 )
```

This array format might be slightly different from your requirement, but it is "lossless", which means we can translate it back in to the tree-like object!

A similar approach:

 - Check if an array represents a `rule` (values will be strings), or a `condition` (values will be arrays)
 - If it's a rule, transform the tuple to an object with named keys
 - If it's a condition, extract the `condition` and parse the nested arrays

To untangle our `[1, a, 2, a, 3]` type arrays, I wrote a utility that does:

```
([1, a, 2, a, 3]) -> [ a, [ 1, 2, 3] ]
```

```js
const buildTree = arr => {
 const isCondition = Array.isArray(arr[0]);
 
 return isCondition
 ? conditionToObject(untangle(arr))
 : ruleToObject(arr);
}

const conditionToObject = ([ [ condition ], children ]) => ({
 condition,
 rules: children.map(buildTree)
});
const ruleToObject = ([ field, operator, value ]) => ({
 field, operator, value
});
```

Putting it all together with your test data:





 // Transforming object trees to nested arrays
 const childToArray = child => "condition" in child 
 ? conditionToArray(child)
 : ruleToArray(child);
 
 const ruleToArray = ({ field, operator, value }) => [field, operator, value]
 const conditionToArray = ({ condition, rules }) =>
 interweave(
 [ condition ],
 rules.map(childToArray)
 )
 
 // Transforming nested arrays to object trees
 const buildTree = arr => {
 const isCondition = Array.isArray(arr[0]);
 
 return isCondition
 ? conditionToObject(untangle(arr))
 : ruleToObject(arr);
 }

 const conditionToObject = ([ [ condition ], children ]) => ({
 condition,
 rules: children.map(buildTree)
 });
 const ruleToObject = ([ field, operator, value ]) => ({
 field, operator, value
 });


 // App:
 // 1) To array
 const arrayOutput = childToArray(getInput());

 // 2) Back to object
 const objectOutput = buildTree(arrayOutput);

 // 3) Log output
 console.log("Array output");
 console.log(JSON.stringify(arrayOutput));
 console.log("Object output");
 console.log(objectOutput);

 // 4) Verify equality
 console.log(
 "inp obj -> arr -> out obj == inp obj:",
 JSON.stringify(objectOutput) === JSON.stringify(getInput())
 );

 // 5) arrayOutput with custom toString
 const arrayOutputToString = arr => {
 const isCond = Array.isArray(arr[0]);
 
 return isCond
 ? `(${arr.map(arrayOutputToString)})`
 : JSON.stringify(arr)
 }

 console.log(
 arrayOutputToString(arrayOutput)
 )


 function getInput() {
 return {
 "condition": "and",
 "rules": [{
 "field": "Name",
 "operator": "=",
 "value": "Jack"
 },
 {
 "field": "UserId",
 "operator": "=",
 "value": 2
 },
 {
 "field": "Surname",
 "operator": "=",
 "value": "Rose"
 },
 {
 "condition": "or",
 "rules": [{
 "field": "Code",
 "operator": "=",
 "value": "X"
 },
 {
 "field": "Type",
 "operator": "=",
 "value": "Z"
 }
 ]
 }
 ]
 }
 };



 <script>
 // Utils
 const interweave = (y, xs) => xs.flatMap(
 (x, i) => i === xs.length - 1 ? [x] : [x, y]
 );

 const untangle = xs => {
 const wovenEl = xs[1];
 const els = [];
 
 for (let i = 0; i < xs.length; i += 2) {
 els.push(xs[i]);
 }
 
 return [ wovenEl, els ];
 }
 </script>

Draft saved

Draft discarded

Edit Summary*

Cancel

The only thing missing for this solution is the parenthesis around the "or". The above solution outputs it as [["Code","=","X"],["or"],["Type","=","Z"]] where the final result should be (["Code","=","X"],["or"],["Type","=","Z"]). Other than that this solution solves all the other issues.

Bracher
– Bracher

2021年07月15日 08:39:57 +00:00
Commented Jul 15, 2021 at 8:39
1

I added a quick custom toString function to use () around conditions. To be consistent however, I think you also need the () around the outermost part of the filter. In your example, that part has [].

user3297291
– user3297291

2021年07月15日 09:04:23 +00:00
Commented Jul 15, 2021 at 9:04
what does that toString look like?

Bracher
– Bracher

2021年07月15日 13:00:59 +00:00
Commented Jul 15, 2021 at 13:00
1

Woops, I actually did not press "Save edits" 🤦‍♂️ It's included now (in the code snippet)

user3297291
– user3297291

2021年07月15日 13:08:47 +00:00
Commented Jul 15, 2021 at 13:08

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-js

CollectivesTM on Stack Overflow

Javascript convert Json to an array string format

Json Format

String Filter Format

Answer*