Question

I am using this example using drag and drop from this site:

I am creating containers using Dnd item types example in the same page. Like this;

Source container

var catalog = new dojo.dnd.Source("catalogNode", {
    accept: ["inStock,outOfStock"]
});
catalog.insertNodes(false, [
    { data: "Wrist watch",        type: ["inStock"] },
    { data: "Life jacket",        type: ["inStock"] },
    { data: "Toy bulldozer",      type: ["inStock"] },
    { data: "Vintage microphone", type: ["outOfStock"] },
    { data: "TIE fighter",        type: ["outOfStock"] },
    { data: "Apples",             type: ["inStock"] },
    { data: "Bananas",            type: ["inStock"] },
    { data: "Tomatoes",           type: ["outOfStock"] },
    { data: "Bread",              type: ["inStock"] }
]);
catalog.forInItems(function(item, id, map){
    // set up CSS classes for inStock and outOfStock
    dojo.addClass(id, item.type[0]);
});

Target container

var wishlist = new dojo.dnd.Source("wishlistNode", {
    accept: ["inStock","outOfStock"]
});

here what I am doing;

dojo.connect(dojo.byId('JsonBtn'), 'onclick', function() {
        var catalogNode = document.getElementById("catalogNode");
        //Get all nodes in the assignRoleListContainer
        var container2 = catalogNode.getAllNodes();
        var results="";
        var catalog_arr = [];
        var len = container2.length;
        for(var i=0;i<len;i++){
            results = catalogNode.childNodes[i].childNodes[0].nodeValue;
            catalog_arr.push(results);
        }
        //Json
        var myJSON2 = "";
        myJSON2 = JSON.stringify({catalog: catalog_arr});
    });

I managed to convert all data in Json;

{"catalog":["Life jacket","Toy bulldozer","Wrist watch","Apples","Bananas","Bread","Tomatoes","Vintage microphone","TIE fighter"]} 

But now I want to convert the items to json, but with respect to their types, e.g.

If type inStock

{"inStock":["Life jacket","Toy bulldozer","Wrist watch","Apples","Bananas","Bread"]}

If type outOfStock

{"outOfStock":["Tomatoes","Vintage microphone","TIE fighter"]}

Any suggestion?

Answer 1

Source container

var catalog = new dojo.dnd.Source("catalogNode", {
    accept: ["inStock","outOfStock"]
});
catalog.insertNodes(false, [
    { data: "Wrist watch",        type: ["inStock"] },
    { data: "Life jacket",        type: ["inStock"] },
    { data: "Toy bulldozer",      type: ["inStock"] },
    { data: "Vintage microphone", type: ["outOfStock"] },
    { data: "TIE fighter",        type: ["outOfStock"] },
    { data: "Apples",             type: ["inStock"] },
    { data: "Bananas",            type: ["inStock"] },
    { data: "Tomatoes",           type: ["outOfStock"] },
    { data: "Bread",              type: ["inStock"] }
]);
catalog.forInItems(function(item, id, map){
    // set up CSS classes for inStock and outOfStock
    dojo.addClass(id, item.type[0]);
});

Target container

var wishlist = new dojo.dnd.Source("wishlistNode", {
    accept: ["inStock","outOfStock"]
});

Button with Id=JsonBtn, and onClick event, convert data in target container to json

dojo.connect(dojo.byId('JsonBtn'), 'onclick', function() {
    var target_container = wishlistNode.getAllNodes();
    var inStock_arr = [];
    var outOfStock_arr = [];
    for(var i=0;i<target_container.length;i++){
        if (hasClass("inStock", target_container[i].classList)){
            var inStock_results = target_container[i].childNodes[0].nodeValue;
            inStock_arr.push(inStock_results);                              
        }                           
        else if(hasClass("outOfStock", target_container[i].classList)){
            var permissions_results = target_container[i].childNodes[0].nodeValue;
            outOfStock_arr.push(outOfStock_results);
        }
    }
    var result={};
    result["inStock"]=inStock_arr;
    result["outOfStock"]=outOfStock_arr;
    alert(JSON.stringify(result));
});

Check classList function

function hasClass(className, classList){
    for (var i=0; i<classList.length; i++){
        if(classList[i]==className){
            return true;
        }               
    }
    return false;
}

Output: (This output also fine for me)

{
 "inStock":[
    "Wrist watch", "Life jacket", "Toy bulldozer", "Apples", "Bananas", "Bread"],
 "outOfStock":[
    "Vintage microphone", "TIE fighter", "Tomatoes"]
}

First of all, thanks to FireFox team for their “FireBug”. It helps a lot in debugging and programming and without it its very difficult for me to find the solution.

And if there any explanation needed, I am happy to help.