Complicated JSON configuration paired with Dojo dropdown menus

Question

Complicated JSON configuration paired with Dojo dropdown menus

I have a data structure that I'm struggling to manage efficiently. To tackle this issue, I've decided to leverage Dojo and utilize JSON. You can find the specific structure I'm referring to at the end of this message, so please take a look before proceeding further.

The challenge at hand involves having 3 Selects. The first Select will display the "first level" options (a, b, c), while the second one will show the "second level" choices (aa, ab, etc.) and so on.

Each Select (excluding the first one) should dynamically adjust its contents based on the selection made in the preceding Select.

For instance, if "a" is chosen in the first Select, only "aa, ab, ac" should be visible in the second Select. Subsequently, selecting "ac" in the second Select should reveal "aca, acb, acc".

It's important to note that there are scenarios where there isn't a "third level." In such cases, the third select should either remain hidden or be left empty if handling it becomes too complex.

Now, concerning references: Opting for "d" in the first Select should present "aa, bc, ca" as choices in the second Select. Following this, choosing "cc" in the second Select should display "cca, ccb, ccc" in the third Select. This linkage should not be static; variations in the "c -> cc" subtree should reflect changes in the "d -> cc" subtree.

Now onto the queries:

1) How can I implement this functionality using Dojo? While I would have no trouble doing so with Vanilla JS, incorporating object stores and similar elements has me stumped.

2) How do I integrate References into this intricate structure? I could handle them in a basic JSON scenario, but the complexity of this setup leaves me perplexed.

3) What approach should I take when presenting the structure? Should I represent it as a single JSON object or split it into multiple segments?

Thank you in advance!

a
    aa
        aaa
        aab
    ab
        aba
    ac
        aca
        acb
        acc
b
    ba
    bb
    bc
        bca
c
    ca
        caa
        cab
    cb
        cba
        cbb
    cc
        cca
        ccb
        ccc
d
    <ref to aa subtree>
    <ref to bc subtree>
    <ref to ca subtree>

javascript json select dojo

Answer 1

Answer №1

If you want to represent it as an object, here's a simple example:

var myData = {
    a: {
        aa: ['aaa', 'aab'],
        ab: ['aba'],
        ac: ['aca', 'acb', 'acc']
    },
    b: {
        ba: null,
        bb: null,
        bc: ['bca']
    },
    c: {
        ca: ['caa', 'cab'],
        cb: ['cba', 'cbb'],
        cc: ['cca', 'ccb', 'ccc']
    },
    d: {}
};
myData.d.aa = myData.a.aa;
myData.d.bc = myData.b.bc;
myData.d.ca = myData.c.ca;

To implement this, you can start by creating a function that retrieves the labels of each level like so:

var getObjectData = function(object) {
    var data = [];
    for (var key in object) {
        if (object.hasOwnProperty(key)) {
            data.push({
                name: key,
                value: object[key]
            });
        }
    }
    return data;
};
var getData = function(obj) {
    var data = [];
    if (obj === undefined) {
        return getObjectData(myData);
    } else if (obj instanceof Array) {
        return obj.map(function(value) {
            return {
                name: value,
                value: null
            };
        });
    } else {
        return getObjectData(obj);
    }
    return data;
};

This function will provide the necessary data structure for your store, with labels and object structures for each level.

Afterwards, you can set up the following code:

registry.byId("level1").setStore(new ObjectStore({
     objectStore: new Memory({
        data: getData(),
        idProperty: 'name'
    })
}));
var getNextLevel = function(value) {
    var data = getData(this.store.objectStore.get(value).value);
    if (this.nextLevel) {
        if (data.length > 0) {
            domStyle.set(registry.byId(this.nextLevel).domNode, "display", "inline-table");
            registry.byId(this.nextLevel).setStore(new ObjectStore({
                objectStore: new Memory({
                    data: data,
                    idProperty: 'name'
                })
            }));
        } else {
            domStyle.set(registry.byId(this.nextLevel).domNode, "display", "none");   
        }
    }
};
registry.byId("level1").on("change", getNextLevel);
registry.byId("level2").on("change", getNextLevel);

With this setup, the data from each level will be fetched and populated when a selection is made, updating the store of the next level accordingly.

Remember, this is just a starting point and more initialization steps may be required. However, it offers a good framework for handling this scenario effectively.

You can view an example implementation here: http://jsfiddle.net/ekoronra/

Answer 2

If you want to represent it as an object, here's a simple example:

var myData = {
    a: {
        aa: ['aaa', 'aab'],
        ab: ['aba'],
        ac: ['aca', 'acb', 'acc']
    },
    b: {
        ba: null,
        bb: null,
        bc: ['bca']
    },
    c: {
        ca: ['caa', 'cab'],
        cb: ['cba', 'cbb'],
        cc: ['cca', 'ccb', 'ccc']
    },
    d: {}
};
myData.d.aa = myData.a.aa;
myData.d.bc = myData.b.bc;
myData.d.ca = myData.c.ca;

To implement this, you can start by creating a function that retrieves the labels of each level like so:

var getObjectData = function(object) {
    var data = [];
    for (var key in object) {
        if (object.hasOwnProperty(key)) {
            data.push({
                name: key,
                value: object[key]
            });
        }
    }
    return data;
};
var getData = function(obj) {
    var data = [];
    if (obj === undefined) {
        return getObjectData(myData);
    } else if (obj instanceof Array) {
        return obj.map(function(value) {
            return {
                name: value,
                value: null
            };
        });
    } else {
        return getObjectData(obj);
    }
    return data;
};

This function will provide the necessary data structure for your store, with labels and object structures for each level.

Afterwards, you can set up the following code:

registry.byId("level1").setStore(new ObjectStore({
     objectStore: new Memory({
        data: getData(),
        idProperty: 'name'
    })
}));
var getNextLevel = function(value) {
    var data = getData(this.store.objectStore.get(value).value);
    if (this.nextLevel) {
        if (data.length > 0) {
            domStyle.set(registry.byId(this.nextLevel).domNode, "display", "inline-table");
            registry.byId(this.nextLevel).setStore(new ObjectStore({
                objectStore: new Memory({
                    data: data,
                    idProperty: 'name'
                })
            }));
        } else {
            domStyle.set(registry.byId(this.nextLevel).domNode, "display", "none");   
        }
    }
};
registry.byId("level1").on("change", getNextLevel);
registry.byId("level2").on("change", getNextLevel);

With this setup, the data from each level will be fetched and populated when a selection is made, updating the store of the next level accordingly.

Remember, this is just a starting point and more initialization steps may be required. However, it offers a good framework for handling this scenario effectively.

You can view an example implementation here: http://jsfiddle.net/ekoronra/

Complicated JSON configuration paired with Dojo dropdown menus

Answer №1

Similar questions

"Exploring the world of jest.doMock: A guide to mocking

Mapping data using MapState is a useful technique that can help organize and access data

Converting a grayscale image matrix into an image using Node.js

Error encountered: The fiber texture failed to load due to a component becoming suspended during the response to synchronous input

What is the process for determining the estimated location of a queued event within a JavaScript Engine's event queue?

Efficiently loading data using lazy loading in jsTree

What happens when 'grid' property is undefined in modal?

Combining react-md with material-ui components: A step-by-step guide

Issue: A file that has been uploaded completely ignores the req.on() method in NodeJS

Encountering a window undefined error while using React-leaflet

How can I retrieve the path to a specific subnode using Javascript/JSON?

Getting the id of a single object in a MatTable

Comparing textboxes on separate web pages to validate forms using AJAX on the server side

How can jQuery obtain the value of an ID or class that does not exist?

Looking to dynamically display users added to an array in a table using Angular and JavaScript?

The absence of AudioPlayer may be responsible for the compilation failure on Vercel

What steps can be taken to address the problem of the "incorrect referer value" when sending a form?

Cause a malfunction in the triggering function of jQuery

LESS — transforming data URIs with a painting mixin

How to implement a Typescript interface without necessarily implementing the parent interfaces