Exploring JSON data in JavaScript

Question

Exploring JSON data in JavaScript

In my Json data, I have a nested structure of folders and files. My goal is to determine the number of files in a specific folder and its sub-folders based on the folder's ID. Below is an example of the JSON dataset:

var jsonStr = {
    "hierarchy": {
        "date": "2014/09/24 15:21:23",
        "folder": {
            "name": "Root",
            "id": "Root",
            "file": [{
                "id": "22U2621210__PIN_検査報告書Ver1.0_20140923162232.xls"
            }, {
                "id": "C22-1(EU仕様)_20140923162409.xlsx"
            }, {
                "id": "Machine_Inspection_20140923162329.xlsx"
            }],
            "folder": {
                "name": "Level-1",
                "id": "1411396172645",
                "file": {
                    "id": "22U2621210__PIN_検査報告書Ver1.0_20140923162232.xls"
                },
                "folder": {
                    "name": "123",
                    "id": "1411538469568",
                    "file": [{
                        "id": "C22-1(EU仕様)_20140923162409.xlsx"
                    }, {
                        "id": "Machine_Inspection_20140923162329.xlsx"
                    }]
                }
            }
        }
    }
};

Each folder has a unique name and ID. If I want to find the number of files within a specific folder and its subfolders by searching with its ID, for instance, if I input the folder "name 123" and ID "1411538469568", it should display only 2 files:

"C22-1(EU仕様)_20140923162409.xlsx"

and

"Machine_Inspection_20140923162329.xlsx"

. However, if I provide the folder name "Root" and ID "Root," it should retrieve all file IDs.

I am currently working on this functionality in a JSFiddle: http://jsfiddle.net/ma3kno2o/

javascript json

Answer 1

Answer №1

If you're looking to enhance your search capabilities, consider using Defiant.js

Have a look at this Fiddle for a specific search scenario where you can extract file IDs from the element with ID: root and Name: root:. I've used Defiant.js in this demonstration:

http://jsfiddle.net/3z8mqr3u/1/

When compared to custom search methods mentioned before, Defiant.js stands out as it simplifies the process of fetching file IDs with just one line of code:

var ids = JSON.search(json,  "//*[name = 'Root' and id = 'Root']/file/id");

This approach minimizes errors when dealing with dynamic data. Defiant.js makes use of XPath expressions for searching. Explore more about it here:

Here are some alternative options worth considering:

You can utilize plain JQuery for your searches

How to search JSON tree with jQuery
Another option is JsonPath, similar to XPath but tailored for JSON files. It enables queries such as:
```
$..folder.file
```
https://code.google.com/p/jsonpath/

https://github.com/s3u/JSONPath
Consider exploring Json-Query which introduces its own language designed for deep queries. For example:

var data = { grouped_people: { 'friends': [ {name: 'Steve', country: 'NZ'}, {name: 'Bob', country: 'US'} ], 'enemies': [ {name: 'Evil Steve', country: 'AU'} ] } }
```
jsonQuery('grouped_people[][country=NZ]', {data: data})
```
https://github.com/mmckegg/json-query

If none of these options resonate with you, there are plenty more alternatives available: Is there a query language for JSON?

Answer 2

If you're looking to enhance your search capabilities, consider using Defiant.js

Have a look at this Fiddle for a specific search scenario where you can extract file IDs from the element with ID: root and Name: root:. I've used Defiant.js in this demonstration:

http://jsfiddle.net/3z8mqr3u/1/

When compared to custom search methods mentioned before, Defiant.js stands out as it simplifies the process of fetching file IDs with just one line of code:

var ids = JSON.search(json,  "//*[name = 'Root' and id = 'Root']/file/id");

This approach minimizes errors when dealing with dynamic data. Defiant.js makes use of XPath expressions for searching. Explore more about it here:

Here are some alternative options worth considering:

You can utilize plain JQuery for your searches

How to search JSON tree with jQuery
Another option is JsonPath, similar to XPath but tailored for JSON files. It enables queries such as:
```
$..folder.file
```
https://code.google.com/p/jsonpath/

https://github.com/s3u/JSONPath
Consider exploring Json-Query which introduces its own language designed for deep queries. For example:

var data = { grouped_people: { 'friends': [ {name: 'Steve', country: 'NZ'}, {name: 'Bob', country: 'US'} ], 'enemies': [ {name: 'Evil Steve', country: 'AU'} ] } }
```
jsonQuery('grouped_people[][country=NZ]', {data: data})
```
https://github.com/mmckegg/json-query

If none of these options resonate with you, there are plenty more alternatives available: Is there a query language for JSON?

Answer 3

Answer №2

This solution may not be the most elegant (apologies, it's 4am), but it tackles the problem through recursion. Your existing structure does not easily cater to same-level folders, so I made some adjustments and provided the corresponding code: http://jsfiddle.net/ma3kno2o/5/

function getFiles(id)
{
 var files = searchFolders(jsonStr.hierarchy.folders, false);
 alert('Found ' + files.length + " files\n" + JSON.stringify(files));

 function searchFolders(tree, count_files)
 {
    var data = [];     
    $.each(tree, function(key, val) {        
        var into = !count_files ? val.id == id : count_files;

        if (val.files && into)
            $.merge(data, getFiles(val.files));

        if (val.folders)
            $.merge(data, searchFolders(val.folders, into));                  

    });
    return data;
 }

 function getFiles(tree)
 { 
    var files = [];
    if (tree.id) return [tree.id]; 
    $.each(tree, function(key,val) {
       if (val.id)
          files.push(val.id);
    });
    return files;
 };
}


var jsonStr = {
    "hierarchy": {
        "date": "2014/09/24 15:21:23",
        "folders": [{
            "name": "Root",
            "id": "Root",
            "files": [{
                "id": "file.1"
            }, {
                "id": "file.2"
            }, {
                "id": "file.3"
            }],
            "folders": [{
                "name": "Level-1",
                "id": "1411396172645",
                "files": {
                    "id": "file.4"
                },
                "folders": [{
                    "name": "123",
                    "id": "1411538469568",
                    "files": [{
                        "id": "file.5"
                    }, {
                        "id": "file.6"
                    }]},
                    {
                    "name": "123",
                    "id": "1411538469569",
                    "files": [{
                        "id": "file.7"
                    }, {
                        "id": "file.8"
                    }]
                }]
            }]
        }]
    }
};

The initial code needed modifications for your new requirements.

http://jsfiddle.net/ma3kno2o/8/

function getFiles(id)
{
 var stp = -1;
 var files = searchFolders(jsonStr.hierarchy, false);
 alert('Found ' + files.length + " files\n" + JSON.stringify(files));

 function searchFolders(tree, count_files)
 {
     var data = [];  
     var folders = tree.folder.length > 1 ? tree.folder : [tree.folder];
     $.each(folders, function(key, val) {  
        var into = !count_files ? val.id == id : count_files;

         if (val.file && into)
            $.merge(data, getFiles(val.file));

         if (val.folder)
            $.merge(data, searchFolders(val, into));  
    });
    return data;
 }

 function getFiles(tree)
 { 
    var files = [];
    if (tree.id) return [tree.id]; 
    $.each(tree, function(key,val) {
       if (val.id)
          files.push(val.id);
    });
    return files;
 };
}


var jsonStr= {"hierarchy":{"date":"2014/09/24 18:13:00","folder":{"name":"Root","id":"Root","file":[{"id":"file.1"},{"id":"file.2"},{"id":"file.3"}],"folder":[{"name":"Level-1","id":"1411396172645","file":{"id":"file.4"},"folder":{"name":"123","id":"1411538469568","file":[{"id":"file.5"},{"id":"file.6"}],"folder":{"name":"123-a","id":"1411549962260","file":{"id":"file.7"}}}},{"name":"level-2","id":"1411549976987","file":{"id":"file.8"}}]}}};

Answer 4

This solution may not be the most elegant (apologies, it's 4am), but it tackles the problem through recursion. Your existing structure does not easily cater to same-level folders, so I made some adjustments and provided the corresponding code: http://jsfiddle.net/ma3kno2o/5/

function getFiles(id)
{
 var files = searchFolders(jsonStr.hierarchy.folders, false);
 alert('Found ' + files.length + " files\n" + JSON.stringify(files));

 function searchFolders(tree, count_files)
 {
    var data = [];     
    $.each(tree, function(key, val) {        
        var into = !count_files ? val.id == id : count_files;

        if (val.files && into)
            $.merge(data, getFiles(val.files));

        if (val.folders)
            $.merge(data, searchFolders(val.folders, into));                  

    });
    return data;
 }

 function getFiles(tree)
 { 
    var files = [];
    if (tree.id) return [tree.id]; 
    $.each(tree, function(key,val) {
       if (val.id)
          files.push(val.id);
    });
    return files;
 };
}


var jsonStr = {
    "hierarchy": {
        "date": "2014/09/24 15:21:23",
        "folders": [{
            "name": "Root",
            "id": "Root",
            "files": [{
                "id": "file.1"
            }, {
                "id": "file.2"
            }, {
                "id": "file.3"
            }],
            "folders": [{
                "name": "Level-1",
                "id": "1411396172645",
                "files": {
                    "id": "file.4"
                },
                "folders": [{
                    "name": "123",
                    "id": "1411538469568",
                    "files": [{
                        "id": "file.5"
                    }, {
                        "id": "file.6"
                    }]},
                    {
                    "name": "123",
                    "id": "1411538469569",
                    "files": [{
                        "id": "file.7"
                    }, {
                        "id": "file.8"
                    }]
                }]
            }]
        }]
    }
};

The initial code needed modifications for your new requirements.

http://jsfiddle.net/ma3kno2o/8/

function getFiles(id)
{
 var stp = -1;
 var files = searchFolders(jsonStr.hierarchy, false);
 alert('Found ' + files.length + " files\n" + JSON.stringify(files));

 function searchFolders(tree, count_files)
 {
     var data = [];  
     var folders = tree.folder.length > 1 ? tree.folder : [tree.folder];
     $.each(folders, function(key, val) {  
        var into = !count_files ? val.id == id : count_files;

         if (val.file && into)
            $.merge(data, getFiles(val.file));

         if (val.folder)
            $.merge(data, searchFolders(val, into));  
    });
    return data;
 }

 function getFiles(tree)
 { 
    var files = [];
    if (tree.id) return [tree.id]; 
    $.each(tree, function(key,val) {
       if (val.id)
          files.push(val.id);
    });
    return files;
 };
}


var jsonStr= {"hierarchy":{"date":"2014/09/24 18:13:00","folder":{"name":"Root","id":"Root","file":[{"id":"file.1"},{"id":"file.2"},{"id":"file.3"}],"folder":[{"name":"Level-1","id":"1411396172645","file":{"id":"file.4"},"folder":{"name":"123","id":"1411538469568","file":[{"id":"file.5"},{"id":"file.6"}],"folder":{"name":"123-a","id":"1411549962260","file":{"id":"file.7"}}}},{"name":"level-2","id":"1411549976987","file":{"id":"file.8"}}]}}};

Exploring JSON data in JavaScript

Answer №1

Answer №2

Similar questions

Discovering the Essence of AngularJS Test Runner: Unraveling the

Comparing prevProps and this.props in React Native Redux: What is the most effective method?

What is the typical output value that fluctuates?

Incorporating <span> elements into a comma-separated list using Jquery on every other item

Explanation on retrieving JSON data from a ListView and passing it to another activity using SQLite in Android Studio

retrieving attribute values from JSON objects using JavaScript

Attempting to implement usedispatch hook in combination with userefs, however, encountering issues with functionality

"Unexpected compatibility issues arise when using TypeScript with React, causing errors in props functionality

Generate text in a random spot effortlessly

How can I effectively refresh the provider_token / access token for Discord in NextJS with Supabase Auth?

What is the method to ensure an element is displayed in Selenium WebDriver?

What is the optimal method for storing extracted JSON data?

Can't access innerText in Firefox

How to adjust cell alignment in Handsontable

The UseEffect hook continues to run even if the dependency (router.query) remains the same

Angular ng-if directive contains a specific class

What steps should be taken to guarantee that the filter function is completed before making an Axios request, in order to avoid encountering an undefined variable error when working with Axios

"Implementing a column template in jqgrid post-creation: A step-by-step

React ensures that the page is not rerendered until after data has been fetched

Design a captivating Profile Picture form using HTML and CSS styling