Thursday, December 15, 2011

Create 3d Array in Javascript from a Java Map of Map and populate result in dropdown

Map<String, Map<String,ArrayList<String>>> is to be broken down into 3 arrays (1d, 2d, 3d) and populate them in dropdown menus.
1d Array --> Movie Main Category (English, French, Bengali etc)
2d Array --> Movie Subcategory (Director Name(Bergman, Kurosawa), Actor Name ) depends on 1st choice
3d Array --> Movie List (Depends upon 1st 2 choices)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>



<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.Set"%>
<%@page import="java.util.Iterator"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
var array1d = new Array();
var array2d = new Array();
var array3d = new Array();
<%

Map<String, Map<String,ArrayList<String>>> map = (Map<String, Map<String,ArrayList<String>>>)request.getAttribute("MainCategory");
Map<String,ArrayList<String>> innerMap = null;

ArrayList<Integer> sizeOfSubCategories = new ArrayList<Integer>(map.size());
ArrayList<String> movieNameList = null;
int index =0;
for(Map.Entry<String, Map<String,ArrayList<String>>> entry : map.entrySet()){
%>
array1d.push('<%=entry.getKey()%>');
array2d[<%=index%>] = new Array();
array3d[<%=index%>] = new Array();
<%
int innerIndex = 0;
for(Map.Entry<String,ArrayList<String>> innerEntry : entry.getValue().entrySet()){
%>
array2d[<%=index%>].push('<%=innerEntry.getKey().replaceAll(" ","_")%>');
array3d[<%=index%>][<%=innerIndex%>] = new Array();
<%
movieNameList = innerEntry.getValue();
for(String myMovieName : movieNameList){
%>
array3d[<%=index%>][<%=innerIndex%>].push("<%=myMovieName%>");
<%
}innerIndex++;
}index++;
}
%>
function populateDropDown(){

var mainCategoryOption = document.getElementById('mainCategoryDropDown').options;
for(var i =0; i < array1d.length; i++)
mainCategoryOption[i] = new Option(array1d[i],i,false,false);
}

function populateSubCategory(mainCategory){
var mainCategoryIndex = mainCategory.selectedIndex;

var subCategoryOption = document.getElementById('subCategoryDropDown').options;
//alert(array2d[mainCategoryIndex]);
subCategoryOption.length = 0;
for(var i =0; i < array2d[mainCategoryIndex].length; i++)
subCategoryOption[i] = new Option(array2d[mainCategoryIndex][i],i,false,false);
populateMovieList(document.getElementById('subCategoryDropDown'));
}

function populateMovieList(subCategory){

var subCategoryIndex = subCategory.selectedIndex;
var mainCategoryIndex = document.getElementById('mainCategoryDropDown').selectedIndex;
var movieListOption = document.getElementById('movieNameDropDown').options;
//alert(array2d[mainCategoryIndex]);
movieListOption.length = 0;
for(var i =0; i < array3d[mainCategoryIndex][subCategoryIndex].length; i++)
movieListOption[i] = new Option(array3d[mainCategoryIndex][subCategoryIndex][i],i,false,false);
}
window.onload = populateDropDown
</script>
</head>
<body>

<select id = "mainCategoryDropDown" onchange="populateSubCategory(this)">
</select>

<select id = 'subCategoryDropDown' onchange="populateMovieList(this)">
<option value="null">Selection</option>
</select>

<select id = 'movieNameDropDown'>
<option value="null">Selection</option>
</select>



</body>
</html>