Convert JSON contents into HTML - json

This has probably been asked a load of times for, so forgive me for asking again.
I have a need to display the contents of a Json string as a formatted HTML fragment. It will be purely a read only view, the Json will vary as well.
I have seen modules out there that deal with form generation based of Json schemas but in my case there is no schema.
Is there anything out there anyone can recommend?

If you are looking for a library to use a quick google search found this.
www.json2html.com
I'm not sure if you are trying to use json data that pre-exists or starting from scratch as you did not provide an example but if you are starting from scratch this might be a good tool to design around.

This may be too limited, but if you're just looking for a pretty-printed view of your json, JSON.stringify supports that out of the box. I use this custom filter:
.filter('pretty', function () {
return function (json) {
return JSON.stringify(json, undefined, 2);
};
})
<pre ng-bind="myData | pretty"></pre>

I haven't come across anything standalone that does this in a generic sense... my approach has been to 'roll my own' so to speak and build to suit my needs like so:
$.each(retrievedStatusData, function(i, val){
$('ul').append('<li class="gamer-list-item">' + val.gamertagis + '</li>');
$('li').eq(i).prepend('<img src="' + val.gamercard.gamerpicSmallImagePath + '" class="gamer-pic">');
});
... which would produce an unordered list with the gamertag / name and a small thumbnail photo for each object in the JSON data source Im working with.
Now I HAVE on occasion, when inspecing JSON structures at a birds eye view sometimes done a loop over JSON and used sort of a for each key loop that displays ALL the JSON data in a 2 column table, the key on the left and value on the right. But that is only really useful for simple JSON data I guess.

Related

How can I pass the document sub-collections along with the document JSON map in Flutter using Firebase?

I'm trying to get all the documents in the "businesses" collection from Firebase together with their sub-collections.
The problem is when I do the query to Firebase like this :
Stream<List<Business>> getBusinesses() {
return _db.collection('businesses').snapshots().map((snapshot) => snapshot
.docs
.map((document) => Business.fromJson(document.data()))
.toList());
}
, the sub-collections aren't passed with the JSON object document.data(), so in my code, the Business object isn't fully completed, which means there are empty fields (Appointments, ServiceProviders,
Services), instead of getting the data from the sub-collections.
So hopefully I've explained the problem well, my question is how can I fetch all the document data including its sub-collections, and parse it to a Business Object?
Thanks.
What seems to be "the problem" is actually the point of Firestore: Keeping documents shallow so you can only get the data you need. It's then up to you to structure your data the way it will likely be used in the future.
Mind you, subcollections are not fields.
What you can do here, is add a query that fetches the documents in the subcollections (Appointments, ServiceProviders, Services), for each business. You would get the business document Id to use for the query.
It would typically look something like:
_db.collection('businesses').document(documentId).collection('Appointments')
Mind you, this is potentially too much data. It might be better to fetch the docs in those subcollections only when needed/requested by the user.

Are you able to subtract in JSON?

Here is my JSON code.
{
"user_email": "{User.Email}",
"activity_date": "{Lead.LastAction.Date}",
"record_id": "{Lead.Id}-{Lead.LastAction.Date}",
"action_type": "{Lead.LastAction}",
"milestone": "{Lead.Milestone}",
"date_added": "{Lead.Date}"
}
Is it possible to add calculations in the code?
For example, can I add a line where the date_added is subtracted from activity_date?
No: JSON is a way to transport JS Objects.
You can do that while you format the JSON in your native language ( for example in PHP or JS serverside), basically creating the JSON object with the result of the calculation.
In JSON just by itself you cannot do that, it's just a data format, it's totally passive, like a text file. (If you happen to use JSONP, then the story would be a bit different, it might be possible, but using JSONP to do such things would step into area of 'hack/exploit' and it probably should not be used in that way:) )
However, I see you are using not only JSON - there is some extra markup like {User.Email}. This is totally outside JSON spec so clearly you are using some form text-templating engine. These can be quite intelligent at times. Check that path, see which one you are using, see what are its features, maybe you can write a custom function or expression to do that subtraction for you. Maybe, just maybe, it's as easy as
"inactivity_period": "{Lead.LastAction.Date - Lead.Date}"
or
"inactivity_period": "{myFunctionThatIWrote(Lead.LastAction.Date, Lead.Date)}"
but that all depends on the templating engine.

How do I pass data between tvml views?

I need to pass data between views in my client-server app. For simple string value, I can put them as attributes on the target element and read the value when the select event is triggered on it. From there, I can pass this string value onto the next document pretty easily.
But the problem comes with much more complex data that's in JSON format. I tried doing JSON.stringify(myData) and putting this value in an attribute. But the compiler doesn't like the { in this attribute value.
I could probably try escaping all the different characters that the compiler has problems with. But I don't think that's a good idea.
Is there any way of implementing jQuery's .data() functionality in TVML and TVJS ? Or is there any other way that makes sending data between views a possibility ?
You can pass your data as URL parameters. Then in the new view, get them using Javascript.
EDIT: And I see in the comment above you came to a similar conclusion.
You could keep your data in a semi-global associative array. Store the key in an attribute on the element and use that to get your data structure.
Ex:
var globalData;
function onSelect(e){
var id=e.target.getAttribute("id");
var specificData=globalData[id];
}

JavaScript front-end and Progress4GL back-end

I want to create an application with front-end HTML + JavaScript and back-end Progress4GL.
I found this documentation: http://communities.progress.com/pcom/docs/DOC-106147 (see Introducing AJAX and Introducing JSON). In the example described it is used GET method when requesting data:
xmlhttp.open("GET", "http://localhost/cgi-bin/cgiip.exe/WService=wsbroker1/getcustomersJSON_param.p?piCustNum="+ custval, true);
xmlhttp.send();
and on Progress4GL procedure for getting the param it is used get-value("piCustNum").
In my application I want to use POST method. So the request will be, for example:
xmlhttp.open("POST","http://localhost/cgi-bin/cgiip.exe/WService=wsbroker1/getcustomersJSON_param.p",true);
xmlhttp.send("piCustNum=" + custval);
But I don't know how to get the sent param on Progress side. Actually I want to send a stringify JSON.
Can anyone help me with this? Thanks!
If you want to POST JSON data to a webspeed program, check out WEB-CONTEXT:FORM-INPUT or if you post more than 32K, check out WEB-CONTEXT:FORM-LONG-INPUT.
Now... regarding reading the JSON data, it depends on your OpenEdge version. In 10.2B Progress started supporting JSON, however it is very limited, especially if you have little control of how the JSON gets created. Since you are the one creating the JSON data it may work for you. Version 11.1 has much better support JSON including a SAX streaming implementation.
We were on version 10.2 so I had to resort to using this C library to convert the JSON into a CSV file. If you have access to Python on your server it is very easy to convert to a CSV file
For the front-end I'd recommend you to use some library (like jQuery) to handle the ajax's request for you, instead of dealing with the complexity to work with different browsers, etc. You can use jQuery's functions like $.ajax, $.get or $.post to make your requests.
A post to a webspeed page could easily be done like this:
var data = {
tt_param: [ { id: 1, des: 'Description 1' } ]
}
var params = { data: JSON.stringify(data) }
$.post(
'http://<domain>/scripts/cgiip.exe/WService=<service>/ajax.p',
params,
function (data) {
alert('returned:' + data);
},
'text'
);
And the back-end would receive the JSON string using get-value('data'):
{src/web2/wrap-cgi.i}
def temp-table tt_param no-undo
field id as int
field des as char.
def var lc_param as longchar no-undo.
procedure output-header:
output-content-type("text/text").
end.
run output-header.
assign lc_param = get-value('data').
temp-table tt_param:read-json('longchar', lc_param).
find first tt_param no-error.
{&OUT} 'Cod: ' tt_param.id ', Des: ' tt_param.des.
It's a good place to start, hope it helps.
Cheers,
There is a library from Node for calling Progress Business Logic dynamically. I hope this would help.
node4progress

reading a json file and selecting values with dojo

I'm trying to read a json file and select a value in the file, but my googling skills have failed me.
I've come across dojo.xhrGet & ItemFileReadStore, but I'm not sure which is the correct one to use. Or are neither correct?
Any help or wave of a flashlight in the right direction would be greatly appreciated.
Can you be more specific. What do you mean by select a values in file? Using dojo you can perform all range of HTTP request(GET, POST, PUT etc) and specify if returened data is text or json.
xhr.get({
url:"data.json",
handleAs:"json",
load: function(data){
for(var i in data){
console.log("key", i, "value", data[i]);
}
}
});
Here data can be treated as object and based on key data can be retrived using obj.key notation