I have a JSON file board.json that I read with ajax method below using jQuery:
$(function(){
$.ajax({//ajax method to load the board.json and call the loadBoard() function on success
'async': false,
'global': false,
type:'GET',
dataType:'json',
url:'board.json',
success:function(data){
map = data;
loadBoard();
}
});
board.json is encoded with base64. But decoded it should look like this:
[
{
"name":"Category1",
"questions":[
{
"value":100,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":200,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":300,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":400,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
}
]
},
{
"name":"Category2",
"questions":[
{
"value":100,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":200,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":300,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":400,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
}
]
},
{
"name":"Category4",
"questions":[
{
"value":100,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":200,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":300,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":400,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
}
]
},
{
"name":"Category5",
"questions":[
{
"value":100,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":200,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":300,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":400,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
}
]
},
{
"name":"Category6",
"questions":[
{
"value":100,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":200,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":300,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
},
{
"value":400,
"question":"",
"answers":[
{
"text":"",
"correct":true
}
]
}
]
}
]
I have tried to use atob() and also the following decode function:
function b64DecodeUnicode(str) {
// Going backwards: from bytestream, to percent-encoding, to original string.
return decodeURIComponent(atob(str).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
But both gives me a string. How can I convert the string into a multidimensional array of objects as in the decoded JSON file above?
EDIT: Here is loadBoard() function below:
function loadBoard(){//function that turns the board.json (loaded in the the map variable) into a jeopardy board
var board = $('#main-board');
var columns = map.length;
var column_width = parseInt(12/columns); //get the width/12 rounded down, to use the bootstrap column width appropriate for the number of categories
var tile_count = 0;
console.log(columns);
$.each(map, function(i,category){
//load category name
var header_class = 'text-center col-md-' + column_width;
if (i === 0 && columns % 2 != 0){ //if the number of columns is odd, offset the first one by one to center them
header_class += ' col-md-offset-1';
}
$('.panel-heading').append(
'<div class="'+header_class+'"><h4>'+category.name+'</h4></div>'
);
//add column
var div_class = 'category col-md-' + column_width;
if (i === 0 && columns % 2 != 0){
div_class += ' col-md-offset-1';
}
board.append('<div class="'+div_class+'" id="cat-'+i+'" data-category="'+i+'"></div>');
var column = $('#cat-'+i);
$.each(category.questions, function(n,question){
//add questions
tile_count ++;
double = 0;
if (question.double) { double = 1; }
column.append('<div class="well question unanswered" id="tile' + tile_count + '" data-question="'+n+'" data-double="' + double + '">'+question.value+'</div>')
});
});
$('.panel-heading').append('<div class="clearfix"></div>')
}
The encoded JSON file is shown below:
"YTo1OntpOjA7YToyOntzOjQ6Im5hbWUiO3M6Nzoic2RmZGRmcyI7czo5OiJxdWVzdGlvbnMiO2E6NDp7aTowO2E6Mzp7czo1OiJ2YWx1ZSI7aToxMDA7czo4OiJxdWVzdGlvbiI7czo2OiJzZGZzZGYiO3M6NzoiYW5zd2VycyI7YToxOntpOjA7YToyOntzOjQ6InRleHQiO3M6Njoic2Rmc2RmIjtzOjc6ImNvcnJlY3QiO2I6MTt9fX1pOjE7YTozOntzOjU6InZhbHVlIjtpOjIwMDtzOjg6InF1ZXN0aW9uIjtzOjY6InNkZnNkZiI7czo3OiJhbnN3ZXJzIjthOjE6e2k6MDthOjI6e3M6NDoidGV4dCI7czo2OiJzZGZzZGYiO3M6NzoiY29ycmVjdCI7YjoxO319fWk6MjthOjM6e3M6NToidmFsdWUiO2k6MzAwO3M6ODoicXVlc3Rpb24iO3M6Njoic2Rmc2RmIjtzOjc6ImFuc3dlcnMiO2E6MTp7aTowO2E6Mjp7czo0OiJ0ZXh0IjtzOjY6InNkZnNkZiI7czo3OiJjb3JyZWN0IjtiOjE7fX19aTozO2E6Mzp7czo1OiJ2YWx1ZSI7aTo0MDA7czo4OiJxdWVzdGlvbiI7czo2OiJzZGZzZGYiO3M6NzoiYW5zd2VycyI7YToxOntpOjA7YToyOntzOjQ6InRleHQiO3M6Njoic2Rmc2RmIjtzOjc6ImNvcnJlY3QiO2I6MTt9fX19fWk6MTthOjI6e3M6NDoibmFtZSI7czo2OiJzZGZzZGYiO3M6OToicXVlc3Rpb25zIjthOjQ6e2k6MDthOjM6e3M6NToidmFsdWUiO2k6MTAwO3M6ODoicXVlc3Rpb24iO3M6Njoic2Rmc2RmIjtzOjc6ImFuc3dlcnMiO2E6MTp7aTowO2E6Mjp7czo0OiJ0ZXh0IjtzOjY6InNkZnNkZiI7czo3OiJjb3JyZWN0IjtiOjE7fX19aToxO2E6Mzp7czo1OiJ2YWx1ZSI7aToyMDA7czo4OiJxdWVzdGlvbiI7czo2OiJzZGZzZGYiO3M6NzoiYW5zd2VycyI7YToxOntpOjA7YToyOntzOjQ6InRleHQiO3M6Njoic2Rmc2RmIjtzOjc6ImNvcnJlY3QiO2I6MTt9fX1pOjI7YTozOntzOjU6InZhbHVlIjtpOjMwMDtzOjg6InF1ZXN0aW9uIjtzOjY6InNkZnNkZiI7czo3OiJhbnN3ZXJzIjthOjE6e2k6MDthOjI6e3M6NDoidGV4dCI7czo2OiJzZGZzZGYiO3M6NzoiY29ycmVjdCI7YjoxO319fWk6MzthOjM6e3M6NToidmFsdWUiO2k6NDAwO3M6ODoicXVlc3Rpb24iO3M6Njoic2Rmc2RmIjtzOjc6ImFuc3dlcnMiO2E6MTp7aTowO2E6Mjp7czo0OiJ0ZXh0IjtzOjY6InNkZnNkZiI7czo3OiJjb3JyZWN0IjtiOjE7fX19fX1pOjI7YToyOntzOjQ6Im5hbWUiO3M6Njoic2Rmc2RmIjtzOjk6InF1ZXN0aW9ucyI7YTo0OntpOjA7YTozOntzOjU6InZhbHVlIjtpOjEwMDtzOjg6InF1ZXN0aW9uIjtzOjY6InNkZnNkZiI7czo3OiJhbnN3ZXJzIjthOjE6e2k6MDthOjI6e3M6NDoidGV4dCI7czo2OiJzZGZzZGYiO3M6NzoiY29ycmVjdCI7YjoxO319fWk6MTthOjM6e3M6NToidmFsdWUiO2k6MjAwO3M6ODoicXVlc3Rpb24iO3M6Njoic2Rmc2RmIjtzOjc6ImFuc3dlcnMiO2E6MTp7aTowO2E6Mjp7czo0OiJ0ZXh0IjtzOjY6InNkZnNkZiI7czo3OiJjb3JyZWN0IjtiOjE7fX19aToyO2E6Mzp7czo1OiJ2YWx1ZSI7aTozMDA7czo4OiJxdWVzdGlvbiI7czo2OiJzZGZzZGYiO3M6NzoiYW5zd2VycyI7YToxOntpOjA7YToyOntzOjQ6InRleHQiO3M6Njoic2Rmc2RmIjtzOjc6ImNvcnJlY3QiO2I6MTt9fX1pOjM7YTozOntzOjU6InZhbHVlIjtpOjQwMDtzOjg6InF1ZXN0aW9uIjtzOjY6InNkZnNkZiI7czo3OiJhbnN3ZXJzIjthOjE6e2k6MDthOjI6e3M6NDoidGV4dCI7czo2OiJzZGZzZGYiO3M6NzoiY29ycmVjdCI7YjoxO319fX19aTozO2E6Mjp7czo0OiJuYW1lIjtzOjY6InNkZnNkZiI7czo5OiJxdWVzdGlvbnMiO2E6NDp7aTowO2E6Mzp7czo1OiJ2YWx1ZSI7aToxMDA7czo4OiJxdWVzdGlvbiI7czo2OiJzZGZzZGYiO3M6NzoiYW5zd2VycyI7YToxOntpOjA7YToyOntzOjQ6InRleHQiO3M6Njoic2Rmc2RmIjtzOjc6ImNvcnJlY3QiO2I6MTt9fX1pOjE7YTozOntzOjU6InZhbHVlIjtpOjIwMDtzOjg6InF1ZXN0aW9uIjtzOjY6InNkZnNkZiI7czo3OiJhbnN3ZXJzIjthOjE6e2k6MDthOjI6e3M6NDoidGV4dCI7czo2OiJzZGZzZGYiO3M6NzoiY29ycmVjdCI7YjoxO319fWk6MjthOjM6e3M6NToidmFsdWUiO2k6MzAwO3M6ODoicXVlc3Rpb24iO3M6Njoic2Rmc2RmIjtzOjc6ImFuc3dlcnMiO2E6MTp7aTowO2E6Mjp7czo0OiJ0ZXh0IjtzOjY6InNkZnNkZiI7czo3OiJjb3JyZWN0
