Pick first element from JSON Array with no identifier with jquery - javascript

I'm failing to access the number inside the DATA array, which would be the ID mentioned in the COLUMNS.
My JSON is as follows:
{
"COLUMNS": [
"ID",
"DESCRIPTION",
"DATE"
],
"DATA": [
[
53,
"Try to do something test123",
"September, 05 2017 00:00:00 +0100"
]
]
}
My current attempt was this, but with this, I get the whole 3 elements
var jsonLength= JSON.DATA.length;
for (dataIndex = 0; dataIndex < jsonLength; dataIndex++) {
var dataLength= JSON.DATA[dataIndex].length;
for (noteIndex = 0; noteIndex < dataLength; noteIndex++) {
alert(JSON.DATA[dataIndex]);
}
}

Your code is almost correct, you're just missing the second index accessor on your 2D DATA array. You can use the noteIndex incrementing variable from your loop:
var JSON = {
"COLUMNS": [ "ID", "DESCRIPTION", "DATE" ],
"DATA": [
[ 53, "Try to do something test123", "September, 05 2017 00:00:00 +0100" ]
]
}
var jsonLength = JSON.DATA.length;
for (dataIndex = 0; dataIndex < jsonLength; dataIndex++) {
var dataLength = JSON.DATA[dataIndex].length;
for (noteIndex = 0; noteIndex < dataLength; noteIndex++) {
console.log(JSON.DATA[dataIndex][noteIndex]); // note the additional [] here
}
}

var jsonLength= JSON.DATA.length;
for (var i = 0; i < jsonLength; i++) {
var note = JSON.DATA[i]
var id = note[0] // access id value
}
Also, if you are the owner of server, why not return more suitable and preferred json structure like this? :
[
{"id": 1, "description": "..."},
{"id": 1, "description": "..."}
]

Related

Accessing data in JS structure

I'm trying to parse the following data:
data = [
{"id":"orderBy", "options" : [
{"value":"order-by=newest&", "name":"newest"},
{"value":"order-by=relevance&", "name":"relevance"}
]},
{"id":"searchBy", "options" : [
{"value":"search-by=name&", "name":"name"},
{"value":"search-by=number&", "name":"number"},
{"value":"search-by=date&", "name":"date"},
{"value":"search-by=location&", "name":"location"}
]}
];
Using this data I want to iterate through each object and return its ID, and then all of it options.
I know I need to use for loop like this:
for (var i =0; i < data.length; i++) {
var id = data[i].id;
var optionText = data[i].options[i].text;
var optionValue = data[i].options[i].value;
console.log(id);
console.log(optionText);
console.log(optionValue);
}:
This loop only returns the first OptionText & OptionValue from the data. Can you teach me what I'm doing wrong?
Thanks.
You could use another for loop for the inner array.
var data = [{ "id": "orderBy", "options": [{ "value": "order-by=newest&", "name": "newest" }, { "value": "order-by=relevance&", "name": "relevance" }] }, { "id": "searchBy", "options": [{ "value": "search-by=name&", "name": "name" }, { "value": "search-by=number&", "name": "number" }, { "value": "search-by=date&", "name": "date" }, { "value": "search-by=location&", "name": "location" }] }],
i, j, id, optionText, optionValue;
for (i = 0; i < data.length; i++) {
id = data[i].id;
for (j = 0; j < data[i].options.length; j++) {
optionText = data[i].options[j].name;
optionValue = data[i].options[j].value;
console.log(id, optionText, optionValue);
}
}
data = [
{"id":"orderBy", "options" : [
{"value":"order-by=newest&", "name":"newest"},
{"value":"order-by=relevance&", "name":"relevance"}
]},
{"id":"searchBy", "options" : [
{"value":"search-by=name&", "name":"name"},
{"value":"search-by=number&", "name":"number"},
{"value":"search-by=date&", "name":"date"},
{"value":"search-by=location&", "name":"location"}
]}
];
for (var i in data) {
var id = data[i].id;
console.log(id)
for (var opt of data[i].options){
console.log(opt.value);
console.log(opt.name)
}
}
You lacked an interation loop. Also I believe it could be the perfect example for you to see the difference (and existence?) of iterating through objects and arrays with in and of
You have two levels of arrays you need to loop through. First loop through the outer array, and then through the options of each item:
var data = [{"id":"orderBy","options":[{"value":"order-by=newest&","name":"newest"},{"value":"order-by=relevance&","name":"relevance"}]},{"id":"searchBy","options":[{"value":"search-by=name&","name":"name"},{"value":"search-by=number&","name":"number"},{"value":"search-by=date&","name":"date"},{"value":"search-by=location&","name":"location"}]}];
for (var i = 0; i < data.length; i++) {
var id = data[i].id;
console.log(id);
for(var j = 0; j < data[i].options.length; j++) {
var optionText = data[i].options[j].name;
var optionValue = data[i].options[j].value;
console.log(optionText);
console.log(optionValue);
}
}

Object Array Formatting

I have an object in this format:
var request = {
"student": [
[
"name",
"age"
],
[
"Tom",
12
],
[
"Jack",
13
]
]
};
I want to transform it into this:
var request = {
"student": [
{
"name": "Tom",
"age": 12
},
{
"name": "Jack",
"age": 13
}
]
}
I tried doing it this way:
var response = [];
var keysCount = req.result[0].length;
var responseCount = req.result.length - 1;
var i = 0,
j = 0,
key;
for (j = 0; j < responseCount; j++) {
for (i = 0; i < keysCount; i++) {
key = req.result[0][i];
response[j][key] = req.result[j + 1][i];
}
}
return response;
But, it is not working as expected.
It's a matter of looping through the first array and creating an array of objects for all the remaining arrays, using values at matching indexes to create properties on object:
var request = {
"student": [
[
"name",
"age"
],
[
"Tom",
12
],
[
"Jack",
13
]
]
};
// Get the header array
var headers = request.student[0];
// Create the new array but mapping the other entries...
var newArray = request.student.slice(1).map(function(entry) {
// Create an object
var newEntry = {};
// Fill it in with the values at matching indexes
headers.forEach(function(name, index) {
newEntry[name] = entry[index];
});
// Return the new object
return newEntry;
});
console.log(newArray);
I would make a small function tabularize that takes an array of data where the first element is an array of headers, and the remaining elements are the rows
Code that follows uses ES6. If you need ES5 support, you can safely transpile this code using a tool like babel.
// your original data
var request = {
"student": [
[
"name",
"age"
],
[
"Tom",
12
],
[
"Jack",
13
]
]
};
// tabularize function
var tabularize = ([headers, ...rows])=>
rows.map(row=>
headers.reduce((acc,h,i)=>
Object.assign(acc, {[h]: row[i]}), {}));
// your transformed object
var request2 = {student: tabularize(request.student)};
// log the output
console.log(request2);
//=> {"student":[{"name":"Tom","age":12},{"name":"Jack","age":13}]}
Or you can create the request object with the intended shape by passing the tabular data directly into the tabularize function at the time of object creation
// tabularize function
var tabularize = ([headers, ...rows])=>
rows.map(row=>
headers.reduce((acc,h,i)=>
Object.assign(acc, {[h]: row[i]}), {}));
// your request object
var request = {
student: tabularize([
[
"name",
"age"
],
[
"Tom",
12
],
[
"Jack",
13
]
])
};
// log the output
console.log(request);
//=> {"student":[{"name":"Tom","age":12},{"name":"Jack","age":13}]}
Let's start off by writing a little function just to create an object from two arrays, one of keys and one of their values:
function makeObjectFromPairs(keys, values) {
var object = {};
for (var i = 0; i < keys.length; i++) {
object[keys[i]] = values[i];
}
return object;
}
// makeObjectFromPairs(['a', 'b'], [1, 2]) === {a: 1, b: 2}
Now we can use the first element of the students array as the keys, and each of the remaining elements as the values.
var keys = students[0];
var result = [];
for (var i = 1; i < students.length; i++) {
result.push(makeObjectFromPairs(keys, students[i]);
}
You could use Array#map etc. as an alternative for the loops, but perhaps this basic approach is more accessible.
Fixing your original code
Since you made a valiant effort to solve this yourself, let's review your code and see where you went wrong. The key point is that you are not initializing each element in your output to an empty object before starting to add key/value pairs to it.
for (j = 0; j < responseCount; j++) {
// Here, you need to initialize the response element to an empty object.
response[j] = {};
Another solution :
var request = {
"student": [
[
"name",
"age"
],
[
"Tom",
12
],
[
"Jack",
13
]
]
};
var response = {};
var students = [];
var responseCount = request.student.length - 1;
var j = 0,
key;
for (j = 0; j < responseCount; j++) {
var student = {};
request.student[0].forEach(function(name, index) {
student[name] = request.student[1 + j][index];
});
students.push(student)
}
response["students"] = students;
console.log(response); // {"students":[{"name":"Tom","age":12},{"name":"Jack","age":13}]}
Lodash solution
var keys = _.head(request.student);
var valueGroups = _.flatten(_.zip(_.tail(request.student)));
var studentObjects = valueGroups.map(function(values){
return values.reduce(function(obj, value, index){
obj[keys[index]] = value;
return obj;
}, {});
});
console.log(studentObjects);
https://jsfiddle.net/mjL9c7wt/
Simple Javascript solution :
var request = {
"student": [
[
"name",
"age"
],
[
"Tom",
12
],
[
"Jack",
13
]
]
};
var students = [];
for(var x = 1; x<request.student.length;x++)
{
var temp = { 'name' : request.student[x][0],
'age' : request.student[x][1]
}
students.push(temp);
}
request = { 'students' : students}
console.log(request);

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>

JSON data transformation from table-like format to JSON?

I have data that's in this format:
{
"columns": [
{
"values": [
{
"data": [
"Project Name",
"Owner",
"Creation Date",
"Completed Tasks"
]
}
]
}
],
"rows": [
{
"values": [
{
"data": [
"My Project 1",
"Franklin",
"7/1/2015",
"387"
]
}
]
},
{
"values": [
{
"data": [
"My Project 2",
"Beth",
"7/12/2015",
"402"
]
}
]
}
]
}
Is there some super short/easy way I can format it like so:
{
"projects": [
{
"projectName": "My Project 1",
"owner": "Franklin",
"creationDate": "7/1/2015",
"completedTasks": "387"
},
{
"projectName": "My Project 2",
"owner": "Beth",
"creationDate": "7/12/2015",
"completedTasks": "402"
}
]
}
I've already got the column name translation code:
r = s.replace(/\%/g, 'Perc')
.replace(/^[0-9A-Z]/g, function (x) {
return x.toLowerCase();
}).replace(/[\(\)\s]/g, '');
Before I dive into this with a bunch of forEach loops, I was wondering if there was a super quick way to transform this. I'm open to using libraries such as Underscore.
function translate(str) {
return str.replace(/\%/g, 'Perc')
.replace(/^[0-9A-Z]/g, function (x) {
return x.toLowerCase();
})
.replace(/[\(\)\s]/g, '');
}
function newFormat(obj) {
// grab the column names
var colNames = obj.columns[0].values[0].data;
// create a new temporary array
var out = [];
var rows = obj.rows;
// loop over the rows
rows.forEach(function (row) {
var record = row.values[0].data;
// create a new object, loop over the existing array elements
// and add them to the object using the column names as keys
var newRec = {};
for (var i = 0, l = record.length; i < l; i++) {
newRec[translate(colNames[i])] = record[i];
}
// push the new object to the array
out.push(newRec);
});
// return the final object
return { projects: out };
}
DEMO
There is no easy way, and this is really not that complex of an operation, even using for loops. I don't know why you would want to use regex to do this.
I would start with reading out the column values into a numerically indexed array.
So something like:
var sourceData = JSON.parse(yourJSONstring);
var columns = sourceData.columns[0].values[0].data;
Now you have a convenient way to start building your desired object. You can use the columns array created above to provide property key labels in your final object.
var sourceRows = sourceData.rows;
var finalData = {
"projects": []
};
// iterate through rows and write to object
for (i = 0; i < sourceRows.length; i++) {
var sourceRow = sourceRows[i].values.data;
// load data from row in finalData object
for (j = 0; j < sourceRow.length; j++) {
finalData.projects[i][columns[j]] = sourceRow[j];
}
}
That should do the trick for you.

How can I get a specific value from my JSON object without using Array.filter()?

Under rows, I want to check and see if I have a value of Submit and the integer value that comes after it. How can I retrieve these two values without using Array.filter()? Google Analytics JS api doesn't like the filter command.
{
"rows": [
[
"Load",
"11"
],
[
"No Thanks",
"7"
],
[
"NoThanks",
"3"
],
[
"No_Thanks",
"2"
],
[
"Results",
"88"
],
[
"Sent",
"1"
],
[
"Sign Up",
"9"
],
[
"XOut",
"161"
],
[
"Submit",
"30"
]
]
}
Just use a for loop...
var submitFound
for(var i = 0; i < rows.length; i++) {
var row = rows[i]
if (row[0] === 'Submit') {
submitFound = true
break
}
}
if (submitFound) // do stuff
Assuming the structure you have in your question is assigned to returnData:
var returnedData = {...}; //Structure from the question
var value = -1;
for(var i = 0; i < returnedData.rows.length; i++){
var row = returnedData.rows[i];
if (row[0] == 'Submit') {
value = row[1];
break;
}
}
if (value > -1) {
// Do whatever with the value
}
Here is an alternative, if you don't wanna use a loop try this :
// this object is simplified for test
var json={
"rows": [
[
"Load",
"11"
],
[
"Submit",
"30"
]
]
};
var stringJson=JSON.stringify(json);
var valueOfSubmit= stringJson.match("\"Submit\"\,\"([^)]+)\"\]")[1];
alert(valueOfSubmit);
Best regards

Categories