Merge pull request #4 from JeanBaptisteWATENBERG/preview-length-in-json

(feat) add length preview in jsonpath previewer

demo/src/index.js

@@ -63,7 +63,7 @@ class Demo extends Component {
                         'price': 19.95
                     }
                 }
-            }} jsonPath='$.store' />
+            }} jsonPath='$.store.book.length' />
 
         </div>;
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-jsonpath-editor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "react-jsonpath-editor React component",
   "main": "lib/index.js",
   "module": "es/index.js",

src/components/JsonPathPreviewer.js

@@ -24,9 +24,12 @@ class JsonPathPreviewer extends Component {
     tagPartOfJsonToHighlight(jsonAsObject, paths, traversedPath = ['$']) {
         if (Array.isArray(jsonAsObject)) {
             const doesTraversingPathMatch = paths.filter(oneOfPathsToRetrieve => oneOfPathsToRetrieve.join(',') === traversedPath.join(',')).length > 0;
+            const isALengthPathMatchingThisCollection = paths.filter(oneOfPathsToRetrieve => oneOfPathsToRetrieve.join(',') === [...traversedPath, 'length'].join(',')).length > 0;
             return `${carriageReturnTag + indentationIncrementationTag}${doesTraversingPathMatch ? highlightingTags.start : ''}[${carriageReturnTag + indentationIncrementationTag}${jsonAsObject.map((item, index) => 
                 this.tagPartOfJsonToHighlight(item, paths, [...traversedPath, index])
-            ).join(',' + carriageReturnTag)}${indentationDecrementationTag + carriageReturnTag}]${doesTraversingPathMatch ? highlightingTags.end  : ''}${indentationDecrementationTag}`;
+            ).join(',' + carriageReturnTag)}${indentationDecrementationTag + carriageReturnTag}]${
+                doesTraversingPathMatch ? highlightingTags.end  : ''
+            }${isALengthPathMatchingThisCollection ? highlightingTags.start + '.length = ' + jsonAsObject.length + highlightingTags.end : ''}${indentationDecrementationTag}`;
         }
 
         if (typeof jsonAsObject === 'object') {

tests/JsonPathPreviewer-test.js

@@ -81,6 +81,14 @@ describe('Json path preview component', () => {
         expect(taggedJSON).toContain('£CR££INC£££TAGGED£[£CR££INC£{£CR££INC£"category": "reference",£CR£"author": "Nigel Rees",£CR£"title": "Sayings of the Century",£CR£"price": 8.95£DEC££CR£},£CR£{£CR££INC£"category": "fiction",£CR£"author": "Evelyn Waugh",£CR£"title": "Sword of Honour",£CR£"price": 12.99£DEC££CR£},£CR£{£CR££INC£"category": "fiction",£CR£"author": "Herman Melville",£CR£"title": "Moby Dick",£CR£"isbn": "0-553-21311-3",£CR£"price": 8.99£DEC££CR£},£CR£{£CR££INC£"category": "fiction",£CR£"author": "J. R. R. Tolkien",£CR£"title": "The Lord of the Rings",£CR£"isbn": "0-395-19395-8",£CR£"price": 22.99£DEC££CR£}£DEC££CR£]£TAGGED£££DEC£');
     });
 
+    it('should display length preview', () => {
+        const wraper = mount(<Previewer json={defaultJson} jsonPath='$..book.length' />);
+        const paths = wraper.instance().evalJsonPath(defaultJson, '$..book.length');
+        const taggedJSON = wraper.instance().tagPartOfJsonToHighlight(defaultJson, paths);
+
+        expect(taggedJSON).toContain('.length = 4');
+    });
+
     it ('should not tag anything', () => {
         const wraper = mount(<Previewer json={defaultJson} jsonPath='$..books' />);
         const paths = wraper.instance().evalJsonPath(defaultJson, '$..books');