HTML Formatting in json data that comes out raw - javascript

I imported json data from this website that provides open data for garbage retrieval. On my website I have a search bar that searches through that to provide the relevant data from the garbage data. Each piece of data has a title and has details about that piece of garbage.
The problem I have is that when I try to output the details part of it, it comes embedded with html formatting stuff it is all properly escaped for display in html. When I try to output it from js by changing a text element on my page using innerhtml, it comes out with all the escape formatting still there. I have copy pasted it and displayed it separately and it displays properly so I know there isn't a problem with the json text.
var garbageInfo = JSON.parse(ourRequest.responseText);
...
for (j = 0;j<garbageInfo.length;j++){
var dataTitle = garbageInfo[j].title.toUpperCase()
if((dataTitle.indexOf(input)!=-1)){
body = garbageInfo[j].body;
document.getElementById("info").innerHTML = body
}
};
For example the output will come out as <ul> <li>Place item in the <strong>Garbage Bin.</strong></li> </ul>
Where it should be the same but with the proper formatting.
Sorry I am quite new to this so I imagine I am doing something wrong I am sorry if this is some repetitive question but I searched around and I couldn't find anyone with a similar problem.
Thank you

Related

How to use javascript split in Qualtrics

Very new to Javascript and have been searching the webs for assistance, but haven't quite found a solution.
I am attempting to use javascript to split/remove the output of a particular field. The data in the survey is being pulled from our school's database after a user logs in to the survey via shibboleth. All the information is being displayed, so that part works, but one particular field is appending an email address (#email.com) to a field.
I want to omit this part from being displayed. Either my javascript is incorrect or the javascript is not being loaded/read. The javascript code was borrowed from a colleague and it works on his surveys, but he has a lot of other things going on in his survey and this works for him.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var iid = "${e://Field/theUTIID}";
var split_array = iid.split("#",1);
var eid = split_array[0];
Qualtrics.SurveyEngine.setEmbeddedData('theUTIID', eid);
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var iid = "${e://Field/theUTIID}";
var split_array = iid.split("#",1);
var eid = split_array[0];
Qualtrics.SurveyEngine.setEmbeddedData('theUTIID', eid);
});
I have this in both the Onload and OnReady for testing. Doesn't matter if I have this is one location or the other, I am not getting the desired results.
I only have one question on the survey (it's just a test survey) and so the javascript code is with the first and only question.
Survey Question has the following in a text entry. Again, output is displayed, but need the #email.com to removed from the EID field.
The code looks correct (other than it only needs to be in one or the other function). I'm guessing it isn't a problem with the code, but where you are trying to pipe the embedded variable. The JavaScript above has to be attached to a question on a separate page before the place where you want to pipe it.
Add a page break, then pipe theUTIID into a question on the next page.

Print html to a surface to be copied

I stored an table's html as a text, using this code.
var Data = document.getElementsByClassName("result")[0].innerHTML;
I am able to observe the selected part using console.log, however, I wish to extract this data to be copied and used outside.
So I tried alert(Data), but it does not offer a good surface to copy the data (it does work though, however I cannot use right click on the pop-up window)
I also tried to programmatically copy the data to the clipboard, but it seems, it only works on selected text data.
Is there a better way to extract such data to be used outside ?
Note: I am using a firefox bookmark to execute javascript. But I expect the code to work also in the other browsers.
Edit: I tried the method suggested in the comments, however in firefox, I got an error.
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.
So rather than copying with that command, printing to a surface seems a better choice, if possible. The linked question does not solve my issue.
Edit2: window.prompt did a much better job, however it rocked my world by pressing the text to a single line. I still should be able to parse it programmatically, but if there is a better answer, I wish to learn it.
Below is my solution to keep multiple lines.
It creates one temp 'textarea', then remove it after select()->copy.
function triggercopy() {
var target_obj = document.getElementById('test1');
var copy_text = target_obj.innerHTML; //replace with your actual data.
var hidden_obj = document.createElement("textarea");
hidden_obj.value = copy_text;
document.body.insertBefore(hidden_obj,target_obj);
console.log('prepare:' + copy_text);
hidden_obj.select();
document.execCommand("copy");
document.body.removeChild(hidden_obj);
console.log('already copied:' + copy_text);
}
Text3as
dfsadf
<a id="test1" onclick="triggercopy();">Text3as
dfsadf</a>
I found two methods best suit my interests.
First, window.prompt:
var Data = document.getElementsByClassName("result")[0].innerHTML;
function copyToClipboard(text) {
window.prompt("Copy data.", text);
}
copyToClipboard(Data)
This is a good method, taken from a suggested answer. This puts the data into a single-line text field. And in an interesting manner, when written without a function, executes document.write(Data) when clicked OK, this does not happen when written in a function as above.
Second, document.write:
var target = document.getElementsByClassName("resultTable striped")[0].outerHTML;
document.open('text/plain');
document.write(target);
I first tried to open a new tab with the desired content, however encountered with the issue of pop-up blockers and non-plain text html data (formatted html instead of the desired table html data). This solves both issues.

Converting JSON to have a new top-level wrapper

I suspect I am using the wrong terminology, so please bear with me.
I have been using mustache.js very effectively to work with the JSON output of an API. I am working with a sibling API that has outlook that looks mostly similar, excepting that there is no top-level name. I am trying to figure out how to adjust the new JSON output into the other format, such that I can continue using my mustache.js approach (this seems like the easier of the options, the other being using something other than mustache.js, which I am seeking to avoid).
I can use mustache.js to iterate very easily over the following JSON body using the top-level name 'records':
{"records":
[{"dt_created":"08/23/2013 04:49:13 PM","created_by":"x, x","dt_updated":"08/23/2013 04:49:13 PM","updated_by":"x, x","field_60374": ["Project 67"],"field_60331":["Ability to adjust the number of lines dynamically based on the mood of the person 3 rows down, 4th cube, 11th building. A breakthrough in mind-control data processing."],"field_60333": [{"id":"x","first":"x","last":"x"}],"field_60394": [{"id":"x","first":"x","last":"x"}],"field_60414":["11"],"field_60375": ["22"],"field_60395":["A"],"record_id":"1920704","form_id":"10898"},
{"dt_created":"08/23/2013 04:47:45 PM","created_by":"x, x","dt_updated":"08/23/2013 04:47:45 PM","updated_by":"x, x","field_60374":["Project 2"],"field_60331":["Very cool project to allow more than a single invoice to be in an ERP at any one time. Quite a big leap forward."],"field_60333": [{"id":"x","first":"x","last":"x"}],"field_60394": [{"id":"x","first":"x","last":"x"}],"field_60414":["x, x"],"field_60375":["60"],"field_60395": ["A"],"record_id":"1920703","form_id":"10898"}],
"meta":{"total":2,"count":2}
}
The format that I can't iterate through, since it is missing a top-level name, is:
[{"id":"x","user": {"id":"x","first_name":"x","last_name":"x"},"title":"Test Post 3","text":"This is an equally cool and enthralling post.","created_at":"2013-08-29T17:46:04.801Z","updated_at":"2013-08-29T17:46:04.804Z","num_comments":0,"num_likes":0},
{"id":"y","user": {"id":"212342277","first_name":"x","last_name":"x"},"title":"Test Post 1","text":"Super cool content you want to read!","created_at":"2013-08- 29T17:44:58.188Z","updated_at":"2013-08-29T17:44:58.190Z","num_comments":0,"num_likes":0}]
I tried the following to massage the second JSON example into the format of the first:
$.ajax({
[…….],
success: function(json_data){
alert("success");
var template=$('#listPosts').html();
var stuff = {"records":json_data}; //here
var stuff = JSON.stringify(stuff); //here
alert(stuff);
//var html = Mustache.to_html(template, json_data);
var html = Mustache.to_html(template, stuff);
//$('.content-pane').empty();
$('#listOfPostsContainer').html(html);
}
}
I have an alert that pops up with what is in var 'stuff', and it seems to be formatted like the first JSON example, but mustache.js doesn't parse it (I have verified mustache.js executes). Before trying to address any other issues, I wanted to understand if how I am adding a top-level name to the JSON array in the above AJAX call success attribute is correct, or if I have to do it differently.
If I am missing something to help explain this, let me know, so I can add it.

How to extract values from text fields in RCP and place it in Javascript code?

I am creating a RCP application which takes source and destination from text fields and gives directions using Google Maps API in a different view. I have javascript code which calls the API, but I need source and destination to be taken from my RCP text fields instead of specifying in the HTML file. How to extract values from those fields and place in the javascript code?
If anyone can share their idea, I would appreciate.
Thanks!
I am not sure where you are stuck in this.. but hope this helps
Text sourceText = new Text(...);
Text destinationText = new Text(...);
//To get value from this text
String source = sourceText.getText();
String destination = destinationText .getText();
But question seems so trivial, that i doubt this is what you want..

Dashboard widget: getting version number from Info.plist

I'm writing a Dashboard widget in Dashcode, and on the back side, I've got a string for credits. I want to include the widget's version number in that string, but if possible, I want to programmatically grab it from the CFBundleVersion or CFBundleShortVersionString key in Info.plist to avoid having to change the number in multiple places if and when I update the widget.
Searches on Apple's developer documentation, Google and various forums have proven fruitless so far. What I'd like to know is whether there's a built-in way to do this that Apple included but forgot to mention (like var version = widget.version(); or something), or whether my script will have to pull in and parse the entire plist before plucking out the one value I actually want.
Thanks for any help you can provide!
I seem to have found the answer: use Dashcode's "data source" facility to read in Info.plist as an XML data source. From there, this blog post showed me how to traverse the plist's structure and get the correct string (in this case, the fifth <string> element in the file, corresponding to CFBundleShortVersionString.
The function I ended up with:
function getWidgetVersion() {
var dataSource = dashcode.getDataSource("infoPlist");
var version = dataSource.selection().valueForKey("dict").valueForKey("string")[4]; // This line and the previous could probably be combined for the sake of brevity
if (typeof(version) == 'string') {
document.getElementById("creditsLabel").innerHTML += version; //I'll change this to just pass the number on
}
}
Since the text of the creditsLabel div has already been started off with a localized string, I get a nice little label saying "Version 1.0".

Categories

Resources