I have a large JSON object that I created with Python, and I'm needing to display the information on a webpage now. My problem is the size of it; there are nested arrays and objects within, and it is several layers deep at points. I wrote an extremely inelegant (and buggy) JavaScript function to pull the data out, but this seems like a recursive problem to me, and I unfortunately am not used to thinking like that (yet).
Does anyone know of a good solution to parsing reading such an object? My goal here is to really read this somewhat dynamically, since I'm going to have to do this many more times (and each time the object will be different, but with more or less the same structure). The goal is to take this information and show it meaningfully on a web page.
Let me know if I can elaborate further.
Edit: Here's the object. I was away from my computer when I posted this, plus it's rather large. Parts of it that might be sensitive I've pulled out. And I'm using the JSON2 to parse this into something other than a string. It's just the sized and nestiness that's giving me a problem.
{
"Loop300": [
{
"Loop310": [
{
"N1": {
"idCode": "0400",
"idQual": "ZZ",
"name": "REDACTED",
"entIdCode": "SF"
},
"N3": [
{
"address1": "REDACTED",
"address2": "REDACTED"
}
],
"G61": [
{
"contactFunctionCode": "CN",
"commNumber": "REDACTED",
"commNumQualifier": "TE",
"name": "shipping"
}
],
"N4": [
{}
]
}
],
"L11": [],
"S5": {
"stopReasonCode": "LD",
"stopSeqNum": "1"
},
"Loop350": [
{
"LAD": [],
"OID": {
"weight": "161",
"poNum": "ASDF",
"weightCode": "L",
"unitMeasure": "CA",
"refID": "THING",
"quantity": "6"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "1",
"desc": "STUFF"
}
}
]
},
{
"LAD": [],
"OID": {
"weight": "104",
"poNum": "ZXMO",
"weightCode": "L",
"unitMeasure": "CA",
"refID": "STUFF",
"quantity": "6"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "2",
"desc": "STUFF"
}
}
]
},
{
"LAD": [],
"OID": {
"weight": "1833",
"poNum": "ASDF",
"weightCode": "L",
"unitMeasure": "CA",
"refID": "THEBLOB",
"quantity": "40"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "3",
"desc": "STUFF"
}
}
]
},
{
"LAD": [],
"OID": {
"weight": "229",
"poNum": "FDSA",
"weightCode": "L",
"unitMeasure": "CA",
"refID": "BATMAN",
"quantity": "6"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "4",
"desc": "STUFF"
}
}
]
}
],
"AT5": [],
"G62": [
{
"date": "20100817",
"datequalifier": "10"
},
{
"date": "20100817",
"datequalifier": "38"
}
],
"NTE": [
{
"refCode": "OTH",
"desc": "No Touch"
}
]
},
{
"Loop310": [
{
"N1": {
"idCode": "9998000006",
"idQual": "ZZ",
"name": "REDACTED",
"entIdCode": "SF"
},
"N3": [
{
"address1": "REDACTED"
}
],
"G61": [
{
"contactFunctionCode": "CN",
"commNumber": "REDACTED",
"commNumQualifier": "TE",
"name": "REDACTED"
}
],
"N4": [
{}
]
}
],
"L11": [],
"S5": {
"stopReasonCode": "LD",
"stopSeqNum": "2"
},
"Loop350": [
{
"LAD": [],
"OID": {
"poNum": "QWERTY",
"refID": "ASDF",
"unitMeasure": "PL",
"quantity": "1"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "1",
"desc": "PORT"
}
}
]
}
],
"AT5": [],
"G62": [
{
"date": "20100817",
"datequalifier": "10"
},
{
"date": "20100817",
"datequalifier": "38"
}
],
"NTE": [
{
"refCode": "OTH",
"desc": "Driver Count Required"
}
]
},
{
"Loop310": [
{
"N1": {
"idCode": "9998000070",
"idQual": "ZZ",
"name": "PLACE",
"entIdCode": "ST"
},
"N3": [
{
"address1": "PLACE"
}
],
"G61": [
{
"contactFunctionCode": "CN",
"commNumber": "XXXXXXXXXX",
"commNumQualifier": "TE",
"name": "X"
}
],
"N4": [
{}
]
}
],
"L11": [],
"S5": {
"stopReasonCode": "UL",
"stopSeqNum": "3"
},
"Loop350": [
{
"LAD": [],
"OID": {
"poNum": "JOE",
"refID": "SUPERMAN",
"unitMeasure": "PL",
"quantity": "1"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "1",
"desc": "PORT"
}
}
]
}
],
"AT5": [],
"G62": [
{
"date": "20100817",
"datequalifier": "68"
},
{
"date": "20100817",
"datequalifier": "54"
}
],
"NTE": [
{
"refCode": "OTH",
"desc": "No Touch"
}
]
},
{
"Loop310": [
{
"N1": {
"idCode": "0000403803",
"idQual": "ZZ",
"name": "REDACTED",
"entIdCode": "ST"
},
"N3": [
{
"address1": "REDACTED"
}
],
"G61": [
{
"contactFunctionCode": "CN",
"commNumber": "0000000000",
"commNumQualifier": "TE",
"name": "REDACTED"
}
],
"N4": [
{}
]
}
],
"L11": [
{
"qualifier": "DO",
"refID": "THETHING"
}
],
"S5": {
"stopReasonCode": "UL",
"stopSeqNum": "4"
},
"Loop350": [
{
"LAD": [],
"OID": {
"weight": "161",
"poNum": "UIP",
"weightCode": "L",
"unitMeasure": "CA",
"refID": "JACK",
"quantity": "6"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "1",
"desc": "STUFF"
}
}
]
},
{
"LAD": [],
"OID": {
"weight": "104",
"poNum": "JKLM",
"weightCode": "L",
"unitMeasure": "CA",
"refID": "SUSAN",
"quantity": "6"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "2",
"desc": "STUFF"
}
}
]
},
{
"LAD": [],
"OID": {
"weight": "1833",
"poNum": "ASDF",
"weightCode": "L",
"unitMeasure": "CA",
"refID": "JOE",
"quantity": "40"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "3",
"desc": "STUFF"
}
}
]
},
{
"LAD": [],
"OID": {
"weight": "229",
"poNum": "AAAA",
"weightCode": "L",
"unitMeasure": "CA",
"refID": "ASDF",
"quantity": "6"
},
"Loop360": [
{
"Loop365": [],
"L5": {
"lineNum": "4",
"desc": "STUFF"
}
}
]
}
],
"AT5": [],
"G62": [
{
"date": "20100817",
"datequalifier": "68"
},
{
"date": "20100817",
"datequalifier": "54"
}
],
"NTE": [
{
"refCode": "OTH",
"desc": "Driver Assist Required"
}
]
}
],
"SE": {
"numSegments": "70",
"controlNum": "0002"
},
"Loop100BT": [],
"L11": [
{
"qualifier": "VD",
"refID": "SALLY"
},
{
"qualifier": "SI",
"refID": "MARK"
},
{
"qualifier": "CR",
"refID": "JOE"
},
{
"qualifier": "RB",
"refID": "USD"
},
{
"qualifier": "TH",
"refID": "REDACTED"
}
],
"PLD": [],
"L3": {
"weight": "2328",
"advances": "0",
"rateQual": "FR",
"charge": "05",
"freightRate": "",
"weig开发者_如何学PythonhtQual": "G",
"quantity": "59"
},
"B2": {
"ordernum": "12345",
"paymethod": "PP",
"scac": "XXXX"
},
"Loop100VI": [
{
"N1": {
"name": "REDACTED",
"entIdCode": "AA"
},
"G61": [
{
"contactFunctionCode": "CN",
"commNumber": "REDACTED",
"contactReference": "0563",
"commNumQualifier": "TE",
"name": "REDACTED"
},
{
"contactFunctionCode": "IC",
"commNumber": "REDACTED",
"commNumQualifier": "EM",
"name": "REDACTED"
},
{
"contactFunctionCode": "ZZ",
"name": "REDACTED"
}
]
}
],
"G62": [
{
"date": "20100827",
"timequalifier": "1",
"datequalifier": "64",
"time": "1302"
}
],
"Loop100CB": [],
"NTE": [
{
"refCode": "ZZZ",
"desc": "26"
},
{
"refCode": "OTH",
"desc": "No Touch"
},
{
"refCode": "OTH",
"desc": "Driver Count Required"
},
{
"refCode": "OTH",
"desc": "No Touch"
},
{
"refCode": "OTH",
"desc": "Driver Assist Required"
}
],
"B2A": {
"purpose": "00"
},
"N7": [
{
"equipLength": "4800",
"equipHeight": "0",
"weight": "2328",
"equipWidth": "0",
"equipNum": "ZZZZ",
"equipType": "TV",
"weightQual": "G"
}
]
}
Thanks, T.J.
do your mean something like this?
function iterateAttributesAndFormHTMLLabels(o){
var s = '';
for(var a in o){
if (typeof o[a] == 'object'){
s+='<label><font color=green>'+a+':</font></label><br />';
s+=iterateAttributesAndFormHTMLLabels(o[a]);
}else{
s+='<label>'+a+': <font color=blue>'+o[a]+'</font></label><br />';
}//end if
}//end for
return s;
}//end function
data = {...};
var html = iterateAttributesAndFormHTMLLabels(data);
No idea if it works in all browsers, does in Chrome and firefox
cheers, Ian
I can appreciate that you are trying to make your question more specific but there is simply not enough information.
The json presented is extremely abstract, most of the keys infer little or no context to the meaning of the data, the structure is quite expansive making the effort to glean the meaning problematic.
'Meaningful' is an ambiguous, relative and subjective term.
Please try to condense and clarify your data exemplar and be more specific in how you would propose to present it and you will have more luck getting answers and guidance relevant to your requirements.
Cheers
this is my original answer to the question as originally stated
Include https://github.com/douglascrockford/JSON-js/blob/master/json2.js in your page. If the browser does not have native JSON, it will fill in.
then
var myobj = JSON.parse(myjsonstring);
rolling your own is just a silly thing to do.
Good luck.
I would suggest JQuery's parseJSON() function.
JQuery's implementation will use the browser's built-in JSON.parse() function, if it exists, and if not, it'll fall back to a pure javascript implementation.
[edit] as pointed out by @Sky, the jQuery implementation is substantially simpler than the reference implementation provided by json.org, and this could present some issues in cases where the source of your JSON isn't necessarily trusted.
My experience is that jQuery's parser will correctly consume any valid JSON (if anyone can show otherwise, I would very much like to see it). The problem is that it will also consume a number of things that aren't JSON--namely, it will consume (and evaluate) any valid javascript expression. Since expressions could contain function calls, this would present a security issue if your JSON comes from an un-trusted source.
However, if the source of your JSON is trusted (eg. your own server), then I can see no reason to incur the extra overhead (both code size, and performance) of the stricter implementation. This is especially true if you're already including the jQuery core for other reasons (which you may or may not be).
Of course, all of this is a fairly pedantic discussion, since both implementations fall back to the browser built-in if it exists -- which it does in all modern browsers. My point is merely that the jQuery implementation has its strengths, and is a perfectly valid choice in many scenarios. In other situations, you may be better served by the reference implementation from json.org.
You could use a JS templating engine to transform your JSON to a humanly readable HTML.
Here is an example of recursion with the PURE templating lib: http://beebole.com/pure/documentation/recursion-example/
The template here is quite generic, using a UL/LI combination.
Or if you want to render it for instance in a textbox you can use JSON.stringify:
document.getElementById('theTextBox').value = JSON.stringify(theJson, null, 2);
The call above to stringify will indent the JSON with 2 spaces.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论