Acquiring mapping information through JSON data retrieval

Question

Acquiring mapping information through JSON data retrieval

Overview :

Each levelNum has three corresponding dropdowns. For example, the dropdown for levelNum2 includes

(Department-Unit-1, Department-Unit-2 & Department-Unit-3)

, levelNum3 includes

(Division-Unit-1 & Division-Unit-2)

, and levelNum4 includes

(Business-Unit-1 & Business-Unit-2)

.

An array of objects is present. Each object contains a property named hierarchyLevels which is an array of objects. These nested objects have two properties: unitName & levelNum. This structure is represented in the below JSON:

var data = [{
    "hierarchyLevels": [{
        "unitName": "Department-Unit-3",
        "levelNum": 2
    }, {
        "unitName": "Division-Unit-2",
        "levelNum": 3
    }, {
        "unitName": "Business-Unit-1",
        "levelNum": 4
    }]
}, {
    "hierarchyLevels": [{
        "unitName": "Department-Unit-1",
        "levelNum": 2
    }, {
        "unitName": "Division-Unit-1",
        "levelNum": 3
    }, {
        "unitName": "Business-Unit-2",
        "levelNum": 4
    }]
}, {
    "hierarchyLevels": [{
        "unitName": "Department-Unit-2",
        "levelNum": 2
    }, {
        "unitName": "Business-Unit-1",
        "levelNum": 4
    }]
}]

Approach Taken :

function getMultipleObjectFromList(propertyName, value, list){
    return list.filter(function (item) {
        return item.hierarchyLevels.some(function (level) {
            return level[propertyName] === value;
        });
    });
};

var res = getMultipleObjectFromList('unitName','Business-Unit-1',data);

Goal :

I aim to automatically populate lower level dropdowns with associated unitName when selecting a specific unitName from a higher level dropdown. For instance, choosing Business-Unit-1 from the levelNum4 dropdown should update the other dropdowns accordingly. In this case, levelNum3 will show only Division-Unit-2 and levelNum2 will display

(Department-Unit-2 & Department-Unit-3)

.

javascript json javascript-objects

Answer 1

Answer №1

The data structure you are working with contains more levels than what your function currently handles. Specifically, there is a property called hierarchyLevels which is an array that you are not iterating over.

Below, I have provided an updated function that retrieves the hierarchyLevels that match a certain criteria. Additionally, there is another function included that returns the inner object when a match is found instead of the entire hierarchyLevels array. This can be useful for populating drop-down menus:

function extractObjects(propertyName, value, list){
    return list.filter(function (item) {
        return item.hierarchyLevels.some(function (level) {
            return level[propertyName] === value;
        });
    });
};

function getDetailFromList(propertyName, value, list){
    return list.map(function (item) {
        return item.hierarchyLevels.filter(function (level) {
            return level[propertyName] === value;
        }).pop(); // only return single match
    }).filter(function (item) { // exclude null
        return item;
    }); 
};


var data = [{
    "hierarchyLevels": [{
        "unitName": "Department-Unit-3",
        "levelNum": 2
    }, {
        "unitName": "Division-Unit-2",
        "levelNum": 3
    }, {
        "unitName": "Business-Unit-1",
        "levelNum": 4
    }]
}, {
    "hierarchyLevels": [{
        "unitName": "Department-Unit-1",
        "levelNum": 2
    }, {
        "unitName": "Division-Unit-1",
        "levelNum": 3
    }, {
        "unitName": "Business-Unit-2",
        "levelNum": 4
    }]
}, {
    "hierarchyLevels": [{
        "unitName": "Department-Unit-2",
        "levelNum": 2
    }, {
        "unitName": "Business-Unit-1",
        "levelNum": 4
    }]
}];

var matchingResults = extractObjects('unitName','Business-Unit-1',data);

var level2Data = getDetailFromList('levelNum', 2, matchingResults);

var level3Data = getDetailFromList('levelNum', 3, matchingResults);

var outputContent = '<h2>Matching Data:</h2>' + JSON.stringify(matchingResults, null, 4) + '\n'
           + '<h2>Level 2 Results:</h2>' + JSON.stringify(level2Data, null, 4)  + '\n'
           + '<h2>Level 3 Results:</h2>' + JSON.stringify(level3Data, null, 4);

document.querySelector('pre').innerHTML = outputContent;

<pre></pre>

Answer 2

The data structure you are working with contains more levels than what your function currently handles. Specifically, there is a property called hierarchyLevels which is an array that you are not iterating over.

Below, I have provided an updated function that retrieves the hierarchyLevels that match a certain criteria. Additionally, there is another function included that returns the inner object when a match is found instead of the entire hierarchyLevels array. This can be useful for populating drop-down menus:

function extractObjects(propertyName, value, list){
    return list.filter(function (item) {
        return item.hierarchyLevels.some(function (level) {
            return level[propertyName] === value;
        });
    });
};

function getDetailFromList(propertyName, value, list){
    return list.map(function (item) {
        return item.hierarchyLevels.filter(function (level) {
            return level[propertyName] === value;
        }).pop(); // only return single match
    }).filter(function (item) { // exclude null
        return item;
    }); 
};


var data = [{
    "hierarchyLevels": [{
        "unitName": "Department-Unit-3",
        "levelNum": 2
    }, {
        "unitName": "Division-Unit-2",
        "levelNum": 3
    }, {
        "unitName": "Business-Unit-1",
        "levelNum": 4
    }]
}, {
    "hierarchyLevels": [{
        "unitName": "Department-Unit-1",
        "levelNum": 2
    }, {
        "unitName": "Division-Unit-1",
        "levelNum": 3
    }, {
        "unitName": "Business-Unit-2",
        "levelNum": 4
    }]
}, {
    "hierarchyLevels": [{
        "unitName": "Department-Unit-2",
        "levelNum": 2
    }, {
        "unitName": "Business-Unit-1",
        "levelNum": 4
    }]
}];

var matchingResults = extractObjects('unitName','Business-Unit-1',data);

var level2Data = getDetailFromList('levelNum', 2, matchingResults);

var level3Data = getDetailFromList('levelNum', 3, matchingResults);

var outputContent = '<h2>Matching Data:</h2>' + JSON.stringify(matchingResults, null, 4) + '\n'
           + '<h2>Level 2 Results:</h2>' + JSON.stringify(level2Data, null, 4)  + '\n'
           + '<h2>Level 3 Results:</h2>' + JSON.stringify(level3Data, null, 4);

document.querySelector('pre').innerHTML = outputContent;

<pre></pre>

Acquiring mapping information through JSON data retrieval

Answer №1

Similar questions

What is the method to activate map dragging in Leaflet only while the spacebar is pressed?

Having issues with Facebook's login API for JavaScript?

How to rename a class of an image tag using jQuery

Creating a welcome screen that is displayed only the first time the app is opened

I must adjust the size of images based on the size of the viewer's screen

Generating JSON data with Ruby for a collection of items

Has the web application continued to run in the background even after toggling between tabs on the browser?

How can we use JavaScript to add a class to the <html> element?

Disabling a DropDownList in ASP MVC when a checkbox is marked: A step-by-step guide

Converting CSV to nested JSON up to three levels deep using Python

Sending requests through RoR and receiving JSON responses - what's next?

When a Vue.js datepicker is set as required, it can be submitted even if

Could someone assist me in identifying the error or mistake?

Should I install @capacitor/android as a dev dependency in the package.json file of a React project?

What is the best way to display a list of items in Vue JS while maintaining the

What could be causing Next.js middleware to run repeatedly?

The Reactjs dependency tree could not be resolved

What should we do to resolve the uncommon use of the 'this' es-lint error? Which rule should we disable?

When attempting to push `content[i]` into an array in AngularJS, it is flagged

Creating a JSON file using the attributes and values of HTML tags