We Keep Coding

Generate HTML table from intricate JSON

I have some JSON data I wish to generate into a nice looking HTML table for seeing stats about someone's performance on a test. In my JSON data I've grouped every student by name, and put their scores in JSON array.
With a simpler JSON like { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" } it would be a lot easier as I could generate a <td> for each JSON object.
So to be clear: I need a way to put the objects in the nested arrays in each their <tr>.
My PHP-generated JSON looks like this:
[
{
"school":"St. Paul"
},
{
"class":"4a"
},
{
"student":"Andreas",
"taskid":[
2,
1
],
"level":[
3,
4
],
"hint":[
1,
0
],
"correctanswer":[
1,
1
],
"timeused":[
30,
20
]
}
]
Are there any simple ways to make a table like this? I am open for any libraries that are relatively simple to set up.
Student x
____________________________________________
|#taskid|level|hint|correctanswer|time used|
|‾‾‾‾‾‾‾|‾‾‾‾‾|‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾|
|‾‾‾‾‾‾‾|‾‾‾‾‾|‾‾‾‾|‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾‾‾|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

I have an answer for you, below is test run for it, took my 4 hours, used only JavsScript no third party library like jquery etc.
You can further improvise it.
Enjoy.
var jsonData = [{
"school": "St. Paul"
}, {
"class": "4a"
}, {
"student": "Natalie",
"taskid": [
3,
4
],
"level": [
1,
2
],
"hint": [
1,
6
],
"correctanswer": [
1,
4
],
"timeused": [
30,
10
]
}, {
"school": "St. Paul"
}, {
"class": "4a"
}, {
"student": "Andreas",
"taskid": [
2,
1
],
"level": [
3,
4
],
"hint": [
1,
0
],
"correctanswer": [
1,
1
],
"timeused": [
30,
20
]
}]
for (var i = 0; i < jsonData.length; i++) {
var nodeTable = document.createElement("table");
var nodeTbody = document.createElement("tbody");
for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {
var headerText = document.createTextNode(Object.keys(jsonData[i])[x]);
var nodeTH = document.createElement("th");
nodeTH.appendChild(headerText);
document.getElementById("schoolRecord").appendChild(nodeTable).appendChild(nodeTbody).appendChild(nodeTH);
}
var maxLength = [];
for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {
for (var z = 0; z < jsonData[i][Object.keys(jsonData[i])[x]].length; z++) {
if (typeof(jsonData[i][Object.keys(jsonData[i])[x]]) !== 'string') {
maxLength.push(jsonData[i][Object.keys(jsonData[i])[x]].length);
}
}
}
if (maxLength.length > 0) {
maxLength = Math.max.apply(Math, maxLength);
}
if (maxLength.length === undefined) {
for (var z = 0; z < maxLength; z++) {
var nodeTR = document.createElement("tr");
nodeTbody.appendChild(nodeTR);
createTD(z);
}
} else {
var nodeTR = document.createElement("tr");
nodeTbody.appendChild(nodeTR);
createTD();
}
function createTD(nodeValue) {
for (var x = 0; x < Object.keys(jsonData[i]).length; x++) {
if (typeof(jsonData[i][Object.keys(jsonData[i])[x]]) === 'string') {
var tdText = document.createTextNode(jsonData[i][Object.keys(jsonData[i])[x]]);
var nodeTD = document.createElement("td");
nodeTD.appendChild(tdText);
nodeTR.appendChild(nodeTD);
} else {
var tdText = document.createTextNode(jsonData[i][Object.keys(jsonData[i])[x]][nodeValue]);
var nodeTD = document.createElement("td");
nodeTD.appendChild(tdText);
nodeTR.appendChild(nodeTD);
}
}
}
}
table th,
table td {
border: 1px solid black;
border-collapse: collapse;
}
<div id="schoolRecord">
</div>

How to convert a nested object into an array of objects?

inputJson = {
"mn": {
"mt1": 1,
"mtop": 2,
"ot1": 3
},
"ln": {
"mt1": 4,
"mtop": 5,
"ot1": 6
}
}
OutputArrayOfJson=[
{ rs: "mt1", mn: 1, ln: 4 },
{ rs: "mtop", mn: 2, ln: 5 },
{ rs: "ot1", mn: 3, ln: 6 }
]
rs is hardcode Key.
I don't know why am having hard time doing this operation.

It is a conversion of javascript objects
inputJson = {
"mn": {
"mt1": 1,
"mtop": 2,
"ot1": 3
},
"ln": {
"mt1": 4,
"mtop": 5,
"ot1": 6
}
}
d = {};
for(var key1 in inputJson){
for(var key2 in inputJson[key1]) {
if(!(key2 in d)){
d[key2]={};
}
d[key2][key1] = inputJson[key1][key2];
}
}
v = [];
for(var k in d){
var o = {};
o.rs=k;
for(var k2 in d[k]){
o[k2] = d[k][k2];
}
v.push(o);
}
//result is in v
note: the next time you should shown example code or not will help

You can iterate through the object and push each root property inside an array:
var arr = [];
for (var p in inputJson){
arr.push(inputJson[p]);
}
console.log(arr);

Extracting multi-dimentsional arrays in Javascript/JQuery

I'm extracting some data from an SQL source, which I can get into a javascript script as a simple array (shown grouped by dates) which consists of week no, task number and hours spent:
mydata = [
// weekno, taskno, hours
["2014-14",160,37.5],
["2014-15",160,30],
["2014-15",243,7.5],
["2014-16",160,37.5],
["2014-17",0,7.5],
["2014-17",3,7.5],
["2014-17",321,22.5],
["2014-18",0,7.5],
["2014-18",321,30],
["2014-19",3,7.5],
["2014-19",295,30]
];
I'm going to be charting it using HighCharts, and I need to get it into two property arrays like this:
properties = {
categories: [ "2014-14","2014-15","2014-16","2014-17","2014-18","2014-19"],
series: [
// Task Week
// No 14 15 16 17 18 19
//
{ name: '0', data: [ 0, 0, 0, 7.5, 7.5, 0 ] },
{ name: '3', data: [ 0, 0, 0, 7.5, 0, 7.5 ] },
{ name: '160', data: [ 37.5, 30, 37.5, 0, 0, 0 ] },
{ name: '243', data: [ 0, 7.5, 0, 0, 0, 0 ] },
{ name: '295', data: [ 0, 0, 0, 0, 0, 30 ] },
{ name: '321', data: [ 0, 0, 0, 22.5, 30, 0 ] }
]
}
Aside from looping, am I missing some succinct, idiomatic method for doing this?

In case it's of use to anyone, here's a cobbled together solution:
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
var categories = [];
var subcategories = [];
var temp = {};
for (var i = 0; i < myChartData.length; i++) {
key = myChartData[i][0];
taskno = myChartData[i][1];
hours = myChartData[i][2];
if (taskno in temp == false) temp[taskno] = {};
if (key in temp[taskno] == false) temp[taskno][key] = 0;
temp[taskno][key] += hours;
categories.push(myChartData[i][0]);
subcategories.push(myChartData[i][1])
}
var uniqueCategories = categories.filter(onlyUnique).sort();
var uniqueSubcategories = subcategories.filter(onlyUnique).sort(function(a, b) {
return a - b
});
var series = [];
for (var i = 0; i < uniqueSubcategories.length; i++) {
subcatKey = uniqueSubcategories[i];
series[i] = { name: 'Task ' + subcatKey, data: [] };
for (var j = 0; j < uniqueCategories.length; j++) {
catKey = uniqueCategories[j];
series[i]['data'].push(temp[subcatKey][catKey] ? temp[subcatKey][catKey] : 0);
}
}
where series and uniqueCategories are the required data.

Is there anything like 'lies in' operator in js, as we have '$in' in mongoose/mongo

i want to implement a function like this in js
function(arrayOfObjects, arrayOfValues, property) {
/*here i want to return all the objects of 'arrayOfObjects'
which satisfies the following condition
(index is the iterative index of array 'arrayOfObjects')
arrayOfObjects[index][property] is equivalent to any of
the values that lies in arrayOfValues */
};
example :
arrayOfObjects = [{ a: 1, b: 2 }, { a: 3, b:4 }, { a: 1, b :3 }];
arrayOfValues = [ 2, 3 ];
function(arrayOfObjects, arrayOfValues, 'b')
should return [{ a: 1, b: 2 }, { a: 1, b :3 }]

arrayOfObjects.filter(function (elem) {
return elem.hasOwnProperty(property)
&& -1 !== arrayOfValues.indexOf(elem[property]);
});
In case you need IE8 support: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Compatibility

You can use the Array.prototype.filter functionality:
var a1 = [{ a: 1, b: 2 }, { a: 3, b:4 }, { a: 1, b :3 }];
var a2 = [2, 3];
var filtered = a1.filter(function(item) {
return a2.indexOf(item.b) != -1;
});

No, this is too complex problem to have some build-in operator or function in JS.
You must use some cycle to walk through the elements.
function(arrayOfObjects, arrayOfValues, property) {
var result = [];
for (var i = 0; i < arrayOfObjects; i++) {
for (var j = 0; j < arrayOfValues; j++) {
if (arrayOfObjects[i][property] === arrayOfValues[j]) {
result.push(arrayOfObjects[i]);
continue; //object already added, go to next one
}
}
}
return result;
};

function fun1(arrayOfObjects, arrayOfValues, property) {
var result = new Array();
for (var obj in arrayOfObjects){
if (arrayOfObjects[obj].hasOwnProperty(property) &&
arrayOfObjects[obj][property] == arrayOfValues[property]){
result.push(arrayOfObjects[obj]);
}
}
return result;
}
var arrayOfObjects = [{ a: 1, b: 2 }, { a: 3, b:4 }, { a: 1, b :3 }];
var arrayOfValues = new Array();
arrayOfValues['a'] = 2;
arrayOfValues['b'] = 3;
console.log(fun1(arrayOfObjects , arrayOfValues , 'b'));
Your arrayOfValues should be an 'associative array' or key-value-pair object which use key to match the property. This might more suit your logic.

Fill in missing data in Javascript

I have an array of objects like this:
[
{
"time": 1,
"value": 405.56
},
{
"time": 2,
"value": 407.64
},
{
"time": 4,
"value": 403.26
},
{
"time": 5,
"value": 403.26
}
]
However, there are no objects at some time (eg 3 is missing in the above example).
For setting the value of this missing data to a default value, I found this thread. However, what I want to do is back-fill the data. For example, I want to create a 3 object so it has the value of the previous object (407.64).
Is there a Javascript library available for doing this kind of manipulation? I do not want to code it myself as far as possible.
EDIT: There might be more missing values but the identifiers (time) will always be numeric.

WORKING FIDDLE
var test = [
{
"time": 1,
"value": 405.56
},
{
"time": 2,
"value": 407.64
},
{
"time": 7,
"value": 403.26
},
{
"time": 12,
"value": 403.26
}
]
function fill() {
var tmp = [];
for (var i = 0, len = test.length - 1; i < len; i++) {
if (test[i]["time"] == test[i+1]["time"] - 1) {
tmp.push(test[i]);
} else {
for (var j = test[i]["time"], l = test[i+1]["time"]; j < l; j++) {
tmp.push(test[i]);
};
}
};
return tmp;
};
function printArray(arr) {
for (var i = 0, len = arr.length; i < len; i++) {
document.body.innerHTML += "<p>" + i + ": " + JSON.stringify(arr[i]) + "</p>";
}
};
printArray(fill(test));

If you want with javascript code then try this-
function fillArray(arr){
var i=1;
while(i<arr.length){
if((arr[i]["time"]*1-arr[i-1]["time"]*1) > 1){
arr.splice(i,0,{"time":i+1, "value": arr[i-1]["value"]});
}
i++;
}
//console.log(arr);
return arr;
}