I am new to JSON and jquery. I have the following use-case for which I need some help.
I need to create an array of objects in the following format:
{ "endpoint" : [
{ "ip": "16.140.23.90", "mac": "a2:35:67:e7" },
{ "ip": "16.140.23.91", "mac": "36:b1:79:ab" }
]
}
This is a sample of what I need (representing two rows only, there can be more). Now the value of ip and mac I need to add by iterating over a table's selected rows.
E.g. there is a table on the GUI in which each row is having two columns "IP" and "MAC". I need to get the data of the selected rows in the above format.
How do I form the JSON array in the above format when I need to add the values of the attributes while iterating? Anything I can do using JSON.stringify API? If yes, then how do I form the string which I can pass to JSON.stringify which results in the above format?
Any help will be highly appreciated.
If this is your table (first cell is ip and 2nd cell is mac)
<table id='tbl'>
<tr><td>16.140.23.90</td><td>a2:35:67:e7</td></tr>
<tr><td>16.140.23.91</td><td>36:b1:79:ab</td></tr>
</table>
Pure JS
var ips = { "endpoint" : [] };
var tbl = document.getElementById('tbl');
for (var i=0; i<tbl.rows.length; i++) {
ips["endpoint"].push({
"ip" : tbl.rows[i].cells[0].innerHTML,
"mac" : tbl.rows[i].cells[1].innerHTML
});
}
Fiddle
jQuery
var ips = { "endpoint" : [] };
$(document).ready(function() {
$('#tbl tr').each(function(i) {
ips["endpoint"].push({
"ip" : $(this).find('td:eq(0)').text(),
"mac" : $(this).find('td:eq(1)').text()
});
});
var json = (JSON.stringify(ips));
document.getElementById('json').innerHTML = json;
});
Fiddle
The first answer is good. But since this question is in regard to jquery, I provide a similar solution using jquery to manipulate the DOM.
The table is still the same:
<table id='tbl'>
<tr><td>16.140.23.90</td><td>a2:35:67:e7</td></tr>
<tr><td>16.140.23.91</td><td>36:b1:79:ab</td></tr>
</table>
The javascript code to creat the json object:
var ips = { "endpoint": [] };
var rows = $('#tbl tr');
for (var i = 0; i < rows.length; i++) {
ips["endpoint"].push({
"ip": rows.eq(i).find("td").eq(0).text(),
"mac": rows.eq(i).find("td").eq(1).text()
});
}
Fiddle
JSON is just a serialized representation of javascript objects, so just make the objects in javascript and then serialize using the JSON.stringify method. If you're not sure how to make a javascript object and add values to an array, then you should do a little googling, since that's pretty basic stuff.
Related
In the past I've always used this to get a hidden column's data. I would hide the column with a css class, but the responsive feature doesn't work well with these.
var td = $('td', this);
var ID = $(td[0]).text();
So I found an alternative, by hiding the columns with these classes with the responsive feature.
"columnDefs": [
//Responsive classes
{ className: 'never', targets: 0 }, //Hide on all devices
{ className: 'all', targets: 1 }, //Show on all devices
]
and then I use either one of these.
var rowData = oTable1.fnGetData(this);
var rowData = oTable1.api().row(this).data();
//Grab the first indexed item in the list
var ID = rowData[0];
That works well if you don't have an AJAX source. It will return a comma separated list of the row data. However, when I try to use this with an AJAX source I just get [object Object] back (instead of a comma separated list) if I output the rowData variable in an alert.
How do I get the row data out of a table with an AJAX source?
It seem to be stored as string so [1, 2, 3] became [object Object] when you turn it into string. Do yourString = yourList.join(',') and store yourString to keep the coma-separated string.
For an object:
yourString = (function () {
var list = [];
for(var i in yourList)
if(yourList.hasOwnProperty(i))
list.push(yourList[i]);
return list.join(',');
})();
The function is not needed, it's just to limit the variables scope.
I ended up using an answer I found here.
Converting a JS object to an array
I can pull the entire row data from the table with this.
var rowData = oTable1.api().row(this).data();
In the console log I can see that it returns a javascript object like this.
Object { id="123456", full_name="Samuel Smith", Last_name="Smith" }
I use this function to convert the object into an array.
var array = $.map(rowData, function (value, index) {
return [value];
});
In the console log, my array would appear like this.
["123456", "Samuel Smith", "Smith"]
I can then extract any item from the array like this.
alert(array[0]);
Simplifying madvora's example:
var rowData = oTable1.api().row(this).data().to$();
rowDataArray = rowData.toArray();
I want to make specific json from table. I have a table, which has rows and 4 columns.
Here is my table I want to build an jsonarray from the table.
First value in the left column is key of json and last value in the right column is a valueof json.
I mean I want to get from table jsonarray, it must look as
json_from_form = [{color: 'id',
name: "mouse",
x: "table",
y: "book"}];
I have tried to build json, but have a problem with structure and setting a key in json object.
Please help me to buld right structure of json object.
var json_from_form_tmp = {};
$('#table').find('tbody tr').each(function (i) {
//var name = $(this).find('td:first').text();
json_from_form_tmp[i] = {
imd: $(this).find('td:eq(3) input').val()
};
});
console.log(json_from_form_tmp);
Here is my DEMO
You should use the jQuery map-function for this, here is an example:
$(function () {
var m = $("table tr").map(function (index, e) {
return {
color: $(e).children().eq(0).text(),
name: $(e).children().eq(1).text()
}
}).get();
});
Where m will be an array of objects as defined inside the map function.
To set a property of the object (json_from_form_tmp), use the ['propertyName'] notation.
//get the name of the property from the first column
var name = $(this).find('td:first').text();
//use that name as the name of the property. Your value fetch was right!
json_from_form_tmp[name] = $(this).find('td:eq(3) input').val();
Here is your fiddle with a tiny modification.
http://jsfiddle.net/bMzq8/32/
I have the following code in an array for Javascript JSON:
params = {
"fighters": [
{
"name": "Muhammad Ali",
"nickname": "The Greatest"
},
{
"name": "Chuck Liddell",
"nickname": "The Iceman"
}
]
};
Now I have "N" variable data "name" and "nickname" from a database SQLITE.
The idea is to show all the "nick" and "nickname" that exist from the database iteratively.
How I can fill it?
I tested with a FOR that runs all the arrangements and I charge them, for it did something like this:
params = {
"fighters": [ show[i] ]
};
It does not work.
I hope I explained correctly.
Thanks.
That will retrieve all fighters names:
var len = params.fighters.length;
for (var i = 0; i < len; i++) {
console.log( params.fighters[i].name );
}
To change fighters names values do the following:
var len = params.fighters.length;
for (var i = 0; i < len; i++) {
params.fighters[i].name = 'Your_Fighter_Name';
}
Hopefully i have helped you.
assuming we're in the fetchAll(function (error, rows) {}) callback using node-sqlite (meaning rows is an array of objects, with the keys in the objects being the column names):
var params = { "fighters" : [] };
rows.forEach(function (row) {
params.fighters.push({name: row.name, nickname: row.nickname});
});
Remember, JSON is subset of JS, it is not it's own language. It's NOT a programming language. You can't "do" anything in JSON, as it is not a programming language. You can't iterate, recurse, fill... you can do that with JS.
Sorry for repeating myself, but apparently a lot of people mistake JSON for something it isn't. I'm not assuming you do, but it can't be said too often ;-) How you want to send the JSON I can't tell you, as there is no information in your question. If you want to do this via a byte-based protocol such as HTTP you might want to use JSON.stringify() to get a textual representation of your object that you can send over the network.
See my version of your fiddle: http://jsfiddle.net/dpL4c/2/ .
It turns out that I came up with my own solution:
var data = {"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$gs":"http://schemas.google.com/spreadsheets/2006","xmlns$batch":"http://schemas.google.com/gdata/batch","id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"Sheet1"},"link":[{"rel":"alternate","type":"text/html","href":"https://spreadsheets.google.com/pub?key\u003d0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE"},{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic"},{"rel":"http://schemas.google.com/g/2005#batch","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/batch"},{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic?alt\u003djson-in-script"}],"author":[{"name":{"$t":"dhuanco"},"email":{"$t":"dhuanco#gmail.com"}}],"openSearch$totalResults":{"$t":"9"},"openSearch$startIndex":{"$t":"1"},"entry":[{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R1C1"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"A1"},"content":{"type":"text","$t":"Maria"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R1C1"}]},{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R1C2"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"B1"},"content":{"type":"text","$t":"30"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R1C2"}]},{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R1C3"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"C1"},"content":{"type":"text","$t":"USA"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R1C3"}]},{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R2C1"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"A2"},"content":{"type":"text","$t":"John"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R2C1"}]},{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R2C2"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"B2"},"content":{"type":"text","$t":"32"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R2C2"}]},{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R2C3"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"C2"},"content":{"type":"text","$t":"ENG"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R2C3"}]},{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R3C1"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"A3"},"content":{"type":"text","$t":"Susan"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R3C1"}]},{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R3C2"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"B3"},"content":{"type":"text","$t":"25"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R3C2"}]},{"id":{"$t":"https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R3C3"},"updated":{"$t":"2012-10-11T21:56:33.189Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#cell"}],"title":{"type":"text","$t":"C3"},"content":{"type":"text","$t":"GER"},"link":[{"rel":"self","type":"application/atom+xml","href":"http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R3C3"}]}]}};
function format_ss(data){ // format spreadsheet
var table = new Array();
for(var k in data.feed.entry){
var id = data.feed.entry[k].id.$t;
var row = id.match(/R([0-9]*)C/)[1]-1;
var col = id.match(/C([0-9]*)/)[1]-1;
if(Object.prototype.toString.call(table[row]) != '[object Array]')
table[row] = new Array();
table[row][col] = data.feed.entry[k].content.$t;
}
return table;
}
var ss = format_ss(data);
It worked like a charm.
Original Question:
This is a public spreadsheet I created using google docs:
https://docs.google.com/spreadsheet/pub?key=0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE&output=html
My problem is, how can I properly get this data with JSON?
I tried
http://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic?alt=json-in-script&callback=test
This is awful to work with. The json data doesn't come properly formatted, for example I can't exactly tell what cell belongs to which column/field.
Does anyone know a better way to fetch this spreadsheet data?
If you look under the "Entry" section you'll see:
"id": {
"$t": "https://spreadsheets.google.com/feeds/cells/0ArzGbN1Jn061dFdJZ29VcWttZExoRXQ5TnZVX29xUlE/od6/public/basic/R1C1"
}
The ID is basically the URL of Row 1, Column 1. Then under that you'll find the:
"content": {
"type": "text",
"$t": "Maria"
}
The $t value there should give you your data. I have to agree it's a bit verbose but that's the nature of something that has so many properties.
I have a JSON as follows
{
columns : [RULE_ID,COUNTRY_CODE],
RULE_ID : [1,2,3,7,9,101,102,103,104,105,106,4,5,100,30],
COUNTRY_CODE : [US,US,CA,US,FR,GB,GB,UM,AF,AF,AL,CA,US,US,US]
}
I need to retrive the column names from the columns entry and then use it to search the rest of the entries using jquery.
For example I get each column using
jQuery.each(data.columns, function(i,column))
I need to loop throgh the rest of the entries using the values I get from the previous loop. ie without hardcoding COUNTRY_CODE or RULE_ID.
What is the best way to do that using Jquery?
jQuery.each(data.columns, function(i,column) {
jQuery.each(data[column], function(i, row) {
....
});
});
Some comments:
Paolo is right, you can use data[column] to get the list of values:
jQuery.each(data.columns, function(iCol,column) {
jQuery.each(data[column], function(iRow, row) {
....
});
});
Do you need the columns information ? You could get the list of "columns" by iterating directly over data:
for( var column in data )
{
jQuery.each(data[column], function(i, row) {
....
});
}
Not really a question but your JSON is not valid JSON, I hope this was only an example and not your real data:
{
"columns" : ["RULE_ID","COUNTRY_CODE"],
"RULE_ID" : [1,2,3,7,9,101,102,103,104,105,106,4,5,100,30],
"COUNTRY_CODE" : ["US","US","CA","US","FR","GB","GB","UM","AF","AF","AL","CA","US","US","US"]
}