I have a json file, there is an array of objects. In the first object is a 2nd array with +/- 200 objects. Is there a possibility to show the 2nd array in a new table in the last row of the first table?
As seen here, there should be a nested table in the column: "Friends"
http://jsfiddle.net/TqbMC/
The html is:
<body onLoad="buildHtmlTable()">
<table id="excelDataTable" border="1">
</table>
</body>
The rest of the code is:
var myList=[{
"id": "220439",
"name": "Bret Taylor",
"friends": {
"data": [
{
"id": "100003461417780",
"name": "Pedro Fernandes"
},
{
"id": "100004448132997",
"name": "Tatiane Rodrigues"
},
{
"id": "100002608573875",
"name": "Gerson Yoody"
},
{
"id": "100003532942622",
"name": "Brennen Roup"
},
{
"id": "100003910478450",
"name": "Maruxita Gomez"
},
{
"id": "100003035179424",
"name": "Ekta Vaghasia"
},
{
"id": "100003034655176",
"name": "Nikita Adam"
},
{
"id": "100004269720826",
"name": "Lukas Ks"
},
{
"id": "100004489472386",
"name": "Hong Finozaza"
},
{
"id": "1436623789",
"name": "Dianita M Ct"
},
{
"id": "100004324535652",
"name": "Ana Paula"
},
{
"id": "100004433135086",
"name": "Caroline Geovannini"
},
{
"id": "100004081013147",
"name": "Ryan Bispo Silva"
},
{
"id": "1697844686",
"name": "Louann Hyatt Clark"
},
{
"id": "100003283377051",
"name": "Ysabel Salazar"
},
{
"id": "100003398360349",
"name": "Ty SoHigh Walker"
},
{
"id": "100001201489463",
"name": "Dicu Andrei D"
},
{
"id": "100001811128458",
"name": "Cristy Torres Castellanos"
},
{
"id": "1693121601",
"name": "Jasim Amit"
},
{
"id": "100001966217366",
"name": "Candy Chhokar"
},
{
"id": "100004096284395",
"name": "Stefania Bilska"
},
{
"id": "100004084157244",
"name": "Papah Noval"
},
{
"id": "1791202672",
"name": "Bianca Agostina Gherardini"
},
{
"id": "100000825894241",
"name": "Usman Faiz"
},
{
"id": "100002424916440",
"name": "Muhammad Tajminur Rahman"
}
],
"paging": {
"next": "https://graph.facebook.com/99394368305/likes?limit=25&after=MTAwMDAyNDI0OTE2NDQw"
}
}
}];
// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable() {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
}
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(myList)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}
(the data comes from the facebook graph api)
you can access inner data in this way: myList[0].friends.data[i].id and myList[0].friends.data[i].name, just iterate until myList[0].friends.data.length is reached and build whatever structure you want - for example create table row for each friend with two td - one for id and one for name – magyar1984
http://jsfiddle.net/6v8Ew/1/
for (var x = 0 ; x < myList[0].friends.data.length ; x++){
$line.append( $( "<td></td>" ).html( myList[0].friends.data[x].id ) );
}
Related
This question already has answers here:
How can I remove a specific item from an array in JavaScript?
(142 answers)
Closed 5 years ago.
This Object:
var Betreiber = {
"user1": [
{
"desc": "60",
"Id": 3473631702,
"Status": "offline"
},
{
"desc": "61",
"Id": 3473631703,
"Status": "offline"
}
],
"user2": [
{
"desc": "62",
"Id": 963346121,
"Status": "offline"
},
{
"desc": "63",
"Id": 963346122,
"Status": "offline"
}
],
"user3": [
{
"desc": "64",
"Id": 972878784
},
{
"desc": "65",
"Id": 3473631706,
"Status": "offline"
}
]
}
My code:
var anlagen = [963346121, 963346122];
for(var users in Betreiber) {
for(var k=0;k<anlagen.length; k++) {
for(var ids in Betreiber[users]) {
if(anlagen[k] != Betreiber[users][ids].Id ){
delete Betreiber[users][ids];
}
}
}
if(Betreiber[users].length === 0) {
delete Betreiber[users];
}
}
i want to splice / delete every Element that doesn't fit my anlagen Array.
For some reason, the Elements are removed, but not completely deleted.
For Example: If i only want to keep the values of user1:
State: user1: [ , ], user2: [ , ], user3: [ , ]
Desired: user1: [data....]
If the user.length is 0, i wan't to delete the whole user.
I think this is what you want:
var Betreiber = {
"user1": [{
"desc": "60",
"Id": 3473631702,
"Status": "offline"
},
{
"desc": "61",
"Id": 3473631703,
"Status": "offline"
}
],
"user2": [{
"desc": "62",
"Id": 963346121,
"Status": "offline"
},
{
"desc": "63",
"Id": 963346122,
"Status": "offline"
}
],
"user3": [{
"desc": "64",
"Id": 972878784
},
{
"desc": "65",
"Id": 3473631706,
"Status": "offline"
}
]
};
var anlagen = [963346121, 963346122];
Object.keys(Betreiber).forEach(key => {
Betreiber[key] = Betreiber[key].filter(item => {
return anlagen.indexOf(item.Id) !== -1;
});
if(!Betreiber[key].length) {
delete Betreiber[key];
}
});
console.log(Betreiber);
You can just filter the element out which don't meet your criteria using Array#filter. And if the resultant array is of length 0, you can delete its key from the object.
var anlagen = [963346121, 963346122];
for(var user in Betreiber) {
for (var k = 0, len = anlagen.length; k < len; k++) {
for (var j = 0, _len = Betreiber[user].length; j < _len; j++) {
if (anlagen[k] != Betreiber[user][j].Id ) {
Betreiber[user].splice(j, 1);
}
}
}
if (Betreiber[user].length === 0) {
delete Betreiber[user];
}
}
I have an object like this:
var Object = {
"id": "Siplus",
"name":"Siplus",
"icon":"forum"
},
{
"id": "Recent",
"name":"Recent Activities",
"icon": "restore"
},
{
"id": "jobList",
"name":"Job List",
"icon": "briefcase"
},
{
"id": "Favourites",
"name":"Favourites",
"icon": "star"
},
{
"id": "searchQuote",
"name":"Search Quotes",
"icon": "binoculars"
},
{
"id": "orderStatus",
"name":"Order Status",
"icon": "clock"
};
I have another array Like this
var array = [1,2,3];
I adding array values to object using this code:
for (var i = 0; i < object.length; i++) {
object[i].number = array[i];
}
I am getting result like this:
var Object = {
"id": "Siplus",
"name":"Siplus",
"icon":"forum",
"number":1
},
{
"id": "Recent",
"name":"Recent Activities",
"icon": "restore",
"number":2
},
{
"id": "jobList",
"name":"Job List",
"icon": "briefcase",
"number":3
},
{
"id": "Favourites",
"name":"Favourites",
"icon": "star",
"number":undefined
},
{
"id": "searchQuote",
"name":"Search Quotes",
"icon": "binoculars",
"number":undefined
},
{
"id": "orderStatus",
"name":"Order Status",
"icon": "clock",
"number":undefined
};
I wanted like this :
var Object = {
"id": "Siplus",
"name":"Siplus",
"icon":"forum",
"number":1
},
{
"id": "Recent",
"name":"Recent Activities",
"icon": "restore",
"number":2
},
{
"id": "jobList",
"name":"Job List",
"icon": "briefcase",
"number":3
},
{
"id": "Favourites",
"name":"Favourites",
"icon": "star",
"number":1
},
{
"id": "searchQuote",
"name":"Search Quotes",
"icon": "binoculars",
"number":2
},
{
"id": "orderStatus",
"name":"Order Status",
"icon": "clock",
"number":3
};
Is their any way to get repeat the number instead of getting "undefined"
Please help me for this
You could map your input objects by adding the right value from array thanks to the modulo calculus
var data = [{
"id": "Siplus",
"name":"Siplus",
"icon":"forum"
},
{
"id": "Recent",
"name":"Recent Activities",
"icon": "restore"
},
{
"id": "jobList",
"name":"Job List",
"icon": "briefcase"
},
{
"id": "Favourites",
"name":"Favourites",
"icon": "star"
},
{
"id": "searchQuote",
"name":"Search Quotes",
"icon": "binoculars"
},
{
"id": "orderStatus",
"name":"Order Status",
"icon": "clock"
}];
var array = [1,2,3];
res = data.map((x,i) => {
x.number = array[i % array.length]
return x;
})
console.log(res);
The size of array is 3 while that of object is more - a solution would be to use:
object[i].number = array[i % array.length];
See demo below:
var object=[{"id":"Siplus","name":"Siplus","icon":"forum"},{"id":"Recent","name":"Recent Activities","icon":"restore"},{"id":"jobList","name":"Job List","icon":"briefcase"},{"id":"Favourites","name":"Favourites","icon":"star"},{"id":"searchQuote","name":"Search Quotes","icon":"binoculars"},{"id":"orderStatus","name":"Order Status","icon":"clock"}]
var array = [1, 2, 3];
for (var i = 0; i < object.length; i++) {
object[i].number = array[i % array.length];
}
console.log(object);
.as-console-wrapper{top:0;max-height:100%!important;}
you could use an additional var.
for (var i = 0, j = 0; i < object.length; i++) {
j++
if(j > array.length){j=0}
object[i].number = array[j];
}
var arrLength = array.length;
for (var i = 0, j = 0; i < object.length; i++, j++) {
if (i >= arrLength ) {
j = 0;
}
object[i].number = array[j];
}
You could use a temporary value to point to the numbers array like this:
var temp = 0;
for (var i = 0; i < object.length; i++) {
object[i].number = array[temp];
if(temp == array.length)
temp = 0;
else
temp++;
}
So for example, i have an JSON like this:
"result": [
{
"Id": 45,
"data": {
"sM": 1667,
"Data": [
{
"date": "2016-02-10",
"value": 96.0
},
{
"date": "2016-02-11",
"value": 81.0
},
{
"date": "2016-02-12",
"value": 19.0
},
{
"date": "2016-02-13",
"value": 72.0
},
},
"Id": 74,
"data": {
"sNe": 1434,
"Data": [
{
"date": "2016-02-10",
"value": 59.0
},
{
"date": "2016-02-11",
"value": 18.0
},
{
"date": "2016-02-12",
"value": 3.0
}
]
And i want the "value" return in an array form like [[96,81,19,72],[59,18,3]], how may i do it?
i tried to do something like
var dashboardDate= data.result;
for (var i=0; i < dashboardData.length; i++){
mentionArr.push(dashboardData[i].data.mentionData);
}
But this return with date which is not doing the job.
I tired to use the indexOf() method like . indexOf("value") as well, but it doesn't seem like working.
You need 2-level nested loop for that. First is loop on the result then loop on the Data on each result's object. Something like this:
data = JSON.parse('{"result":[{"Id":45,"data":{"sM":1667,"Data":[{"date":"2016-02-10","value":96.0},{"date":"2016-02-11","value":81.0},{"date":"2016-02-12","value":19.0},{"date":"2016-02-13","value":72.0}]}},{"Id":74,"data":{"sNe":1434,"Data":[{"date":"2016-02-10","value":59.0},{"date":"2016-02-11","value":18.0},{"date":"2016-02-12","value":3.0}]}}]}');
var dashboardData= data.result;
var newArr = Array();
// loop against result array
for (var i=0; i < dashboardData.length; i++){
var a = Array();
// loop against the Data array on each object in result
for (var x=0; x < dashboardData[i].data.Data.length; x++) {
a.push(dashboardData[i].data.Data[x].value);
}
newArr.push(a);
}
This will output:
JSON.stringify(newArr);
// outputs:
[[96,81,19,72],[59,18,3]]
You give this JSON,is error.
The right is
"result": [
{
"Id": 45,
"data": {
"sM": 1667,
"Data": [
{
"date": "2016-02-10",
"value": 96.0
},
{
"date": "2016-02-11",
"value": 81.0
},
{
"date": "2016-02-12",
"value": 19.0
},
{
"date": "2016-02-13",
"value": 72.0
}
]
}
},
{
"Id": 74,
"data": {
"sNe": 1434,
"Data": [
{
"date": "2016-02-10",
"value": 59.0
},
{
"date": "2016-02-11",
"value": 18.0
},
{
"date": "2016-02-12",
"value": 3.0
}
]
}
}
]
Then traverse
for (var i=0; i < dashboardDate.length; i++){
dashboardDate[i].data.Data.forEach(function(item){
mentionArr.push(item.value)
})
console.log(mentionArr);
I have a JSON file with some data like this:
dataTree.json =
[
{
"datap": "816816816816816818",
"name": "image1.jpg",
"url": "/files/folder1/test/d2e9c54ceedc9/image1.jpg",
"path": "/files/folder1/test/image1.jpg",
"size": 35969
},
{
"datap": "857022de4fccdcb54623ff6185daae706a47140c",
"name": "image2.jpg",
"url": "/files/folder1/pruebas/85623ff6185d7140c/image2.jpg",
"path": "/files/folder1/pruebas/image2.jpg",
"size": 17689282
},
{
"datap": "b260ec3250420c953a9db41897c34e3551620ec325035516256b2/image3.jpg",
"path": "/files/folder1/test/image3.jpg",
"size": 710632
}
]
In this part I make the operation and the format for jstree
$.getJSON('/dataTree.json', function (response) {
var fullTree = [];
if (response == []){
var refullTree = []
}
else {
var refullTree = [{"id":null,"text":"Root","icon":"tree.png","state":null,"children":[]}]
}
function treeElements(element, tree){
var parts = element.path.split("/");
parts.splice(0,2);
for (var k in parts) {
var count = 0
var part = parts[k];
if (part == "") part = "#";
var item = {"id":null, "text": part, "icon": icon(part), "children": []};
tree.push(item);
tree = item.children;
}
function icon(search){
if (search.indexOf(".png",".jpg") > -1){
return "glyphicon glyphicon-picture" }
else if(search.indexOf("jpg",".jpg") > -1){
return "glyphicon glyphicon-picture" }
}
}
for (var i in response) {
treeElements(response[i], fullTree);
}
refullTree[0]["children"] = fullTree
});
The result is output in this format:
[
{
"id": null,
"text": "Root",
"icon": "tree.png",
"state": null,
"children": [
{
"id": null,
"text": "folder1",
"children": [
{
"id": null,
"text": "test",
"children": [
{
"id": null,
"text": "image1.jpg",
"icon": "glyphicon glyphicon-picture",
"children": []
}
]
}
]
},
{
"id": null,
"text": "folder1",
"children": [
{
"id": null,
"text": "pruebas",
"children": [
{
"id": null,
"text": "image2.jpg",
"icon": "glyphicon glyphicon-picture",
"children": []
}
]
}
]
},
{
"id": null,
"text": "folder1",
"children": [
{
"id": null,
"text": "test",
"children": [
{
"id": null,
"text": "image3.jpg",
"icon": "glyphicon glyphicon-picture",
"children": []
}
]
}
]
}
]
}
]
This tree was produced by jstree, and the three folders have the same name. I do not want to create three folders with the same name, I want that when I find a folder that exists, the data is entered into the that existing folder.
Instead, I want this:
Here is a demo of how to parse this structure: http://jsfiddle.net/DGAF4/506/
Here is the actual parsing code (also visible in the fiddle);
var tmp = {}, i, j, k, l, p1, p2, fin = [];
for(i = 0, j = a.length; i < j; i++) {
p1 = a[i].path.replace(/^\//,'').split('/');
p2 = '';
for(k = 0, l = p1.length; k < l; k++) {
tmp[p2 + '/' + p1[k]] = {
id : p2 + '/' + p1[k],
parent : p2 ? p2 : '#',
text : p1[k]
};
p2 += '/' + p1[k];
}
for(k in a[i]) {
if(a[i].hasOwnProperty(k)) {
tmp[a[i].path][k] = a[i][k];
}
}
if(a[i].path.match(/(jpg|png|jpeg)$/)) {
tmp[a[i].path].icon = "glyphicon glyphicon-picture";
}
}
for(i in tmp) {
if(tmp.hasOwnProperty(i)) {
fin.push(tmp[i]);
}
}
// fin contains the structure in a jstree compatible format
This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
use jQuery's find() on JSON object
(6 answers)
Closed 8 years ago.
I am trying to access a particular property of an object , specifically 'levelId' in the following code.
This is what I have so far
FIDDLE
The code goes like this
$(document).ready(function(){
var jsonList = {
"json_data": {
"data": [
{
"data": "A node",
"metadata": {
"id": "23"
},
"children": [
"Child 1",
"A Child 2"
]
},
{
"attr": {
"id": "li.node.id1",
"levelId": "3",
"fmnName": "Ragini"
},
"data": {
"title": "Long format demo",
"attr": {
"href": "#"
}
},
"children": [
{
"data": {
"title": "HQ 50 CORPS"
},
"attr": {
"id": 102,
"parentId": 101,
"fmnId": 194,
"fmnName": "PIVOT CORPS",
"levelId": 1,
"name": "HQ 50 CORPS ",
"isHq": "\u0000",
"susNum": "0415009A",
"modType": "Plain",
"seniorityId": 1,
"wePeNum": "HQ-38 WE 4001/1946/8 (3 DIV)",
"reliefId": 0,
"targetReliefId": 0,
"groupId": 0,
"realOrbatDtlId": 0,
"imgName": "10",
"overlayId": "0415009A",
"symbolCode": "1001001",
"locationName": "BHATINDA",
"nrsName": "BHATINDA"
},
"state": "open"
}
]
},
{
"attr": {
"id": "li.node.id1",
"levelId": "3",
"fmnName": "Rag"
},
"data": {
"title": "Long format demo",
"attr": {
"href": "#"
}
}
},
{
"attr": {
"id": "li.node.id1",
"levelId": "4",
"name": "Skyrbe"
},
"data": {
"title": "Long format demo",
"attr": {
"href": "#"
}
}
}
]
}
}
console.log(JSON.stringify(jsonList,null,4));
var newObject = jsonList.json_data.data;
var listItems= "";
$form = $("<form></form>");
$('#form_container').append($form);
var $selectContainer = $("<select id=\"selectId\" name=\"selectName\" />");
for (var i = 0; i < jsonList.json_data.data.length; i++)
{
if(jsonList.json_data.data[i].hasOwnProperty("attr") && jsonList.json_data.data[i].attr.levelId == 3)
{
listItems+= "<option value='" + jsonList.json_data.data[i].attr.fmnName + "'>" + jsonList.json_data.data[i].attr.fmnName + "</option>";
}
}
$($selectContainer).html(listItems);
$($form).append($selectContainer);
});
The above code is capable of retrieving the levelId only if it is in json_data -> data -> attr. However , the levelId might be nested inside json_data -> data -> children -> attr. How do I go about iterating through this object to fetch levelId even if it's nested deep inside.
Use a nested loop:
var data = jsonList.json_data.data;
for (var i = 0; i < data.length; i++) {
var children = data[i].children;
if (typeof children == 'Object') {
for (var j = 0; j < children.length; j++) {
var levelid = children[j].attr.levelId;
// Do something with this child's levelid
}
}
}