Develop Reference

How to access the TYPO3 settings in JavaScript

In my project we're using TYPO3. We're getting some data from the backend and they're assigned as follows in the html page itself.
var items = {};
items.item1 = {settings.item1};
items.item2 = {settings.item2};
items.item3 = {settings.item3};
and then the values are being assigned to the buttons. Those values will be sent back to the JS when an action has triggered. The {settings.item*} comes from the TYPO3 backend. What I wanted to know is how can I add the above code block in a separate JS file rather than adding it in the HTML page. When I tried adding it directly, it doesn't work as the {settings.item*} comes from TYPO3
Thanks

You have to pick up your settings from the HTML since this is what TYPO3 will render for you. but you could rather make use of the data-attributes of HTML, e.g.
You could also render the whole {settings} array as a JSON string into a data-attribute and pick that up with your JavaScript.

You can use javascript on html file (templates , partial , layouts )
You need to add javascript code between the
Syntax:
<![CDATA[ javascript code ]]> TYPO3 Code <![CDATA[ javascript code ]]>
<script type="text/javascript">
<![CDATA[
{
var items = {};
items.item1 = ]]>{settings.item1}<![CDATA[;
items.item2 = ]]>{settings.item2}<![CDATA[;
items.item3 = ]]>{settings.item3}<![CDATA[;
]]>
</script>
Thanks
I hope it helps !!

Can you define the context more precisely? Where are the settings defined, inside of TypoScript, Flexform, PHP (Extensionmanager)?
If you have settings defined in TypoScript you can use:
page.inlineSettings {
setting1 = Hello
setting2 = GoOnTop
}
To make them available in JavaScript as:
TYPO3.settings = {"TS":{"setting1":"Hello","setting2":"GoOnTop"}};
See: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#inlinesettings
Perhaps this will be removed in future versions as it's purpose is usage via ExtJS. Also it's not possible to use stdWrap and such.
Another, more flexible, way is using
page.jsInline {
10 = TEXT
10.stdWrap.dataWrap = var pageId = {TSFE:id};
}
This allows you to use full TypoScript like TEXT, dataWrap, etc.
See: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#jsinline

I wouldn't write JavaScript from PHP just for some configuration. I would store them in data-attributes of a DOM element and grab it via JavaScript. Maybe this is also an option for you.

External JavaScript file is not defined

For a web project, I've included a JavaScript file as a script src, as shown here.
<script src="xml2json.js"> //same directory as the web project
Next, I tried to invoke a method within xml2json, called xml_str2json.
downloadUrl("ship_track_ajax.php", function(data) {
var xml_string = data.responseText; //an XML string
//A parser to transform XML string into a JSON object is required.
//Use convert XML to JSON with xml2json.js
var markers = xml2json.xml_str2json(xml_string);
}
However, console log indicates "Uncaught ReferenceError: xml2json is not defined", even though xml2json is included as a script src. Can anyone tell me as to what is wrong?

You have to call the function directly in javascript without reffering the filename as like
xml_str2json(xml_string);
If the function is defined in any of the included file it will be invoked.
I hope this will solve your problem

Maybe you should try this:
var json = xml2json(parseXml(xml), " ");
See Demo from https://github.com/henrikingo/xml2json

Append the js code inside js file dynamically and execute

Suppose I have a code in string format:
var str = "var a = 10;b = 20;console.log(a+b);";
I need to append this string value to the existing js file(say test.js) dynamically. And also get the result or execute it.
* However, I can load the string in separate and execute it, but that's not what i need. Thanks for your kind help and advice.

You can do it as :
for example in text file you will call a function where you want to append the code as :
test.js ->
// some javascript code
myFunction();
// some javascript code
Now in main file create this function as :
var execuationCode = "var a = 10;b = 20;console.log(a+b);";
function myFunction(){
setTimeout(execuationCode, 0);
}
When nyFunction call in test.js file then it call this main file function

executing javascript selectors on page source in string format

I am trying to develop and application with jsoup and java to scrap some web pages. So what I am hoping to make is to let jsoup get the page source first and the on the page source let the below javascript get executed and return back a result.
$("body, body *").each(function(i, val) {
// do something and something more
});
I am planning to use ScriptEngineManager to execute javascript code from Java.
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");
My question is how can I make / is there a way that the JS script accept the Document(string) that jsoup returns and do select operation on it just like a regular page.
So what I am hoping to have is something like this:
// document is the Document object returned from the Jsoup or Document converted to string
var myfunction = function(document){
document.$("body, body *").each(function(i, val) {
// do something and something more
});
}

jQuery selector accepts a string of html, and you can utilize the context/scope to select only from that variable. So you can do something like this as an example (using the variable as context):
//a string of elements/html
var doc = '<html><body><ul><li>1</li><li>2</li><li>3</li></ul></body></html>';
$('li', doc).each(function() {
console.log(this); //iterates each 'li' within 'doc'
});
Or, in your case:
var myfunction = function(doc){
$("*", doc).each(function(i, val) {
// do something and something more
});
}

How to scrape embedded JSON using PhantomJS

I need to get a particular piece of data from a JSON string encoded within a script tag within a returned HTML document using phantomjs. The HTML looks basically like this:
... [preamble html tags etc.]
....
<script id="ine-data" type="application/json">
{"userData": {"account_owner": "Grib"},
"skey":"b207ff1f8d5a394c2f7af1681ad3470c",
"location": "EU"
</script>
<script id="notification-data" type="application/json">
... [other stuff including html body]
What I need to get to is the value for skey within the JSON. I am unable to use the selectors to even get to the script. For instance,
page.open('https://www.site1.com/dash', function(status) {
var ine_data = document.querySelectorAll('script').item(0);
console.log(ine_data); phantom.exit();
});
This returns null. Can anyone point me in the right direction please?

The PhantomJS function you're looking for is called page.evaluate (documentation). It allows you to run javascript sandboxed within the javascript environment of the browser itself.
So following your example:
page.open('https://www.site1.com/dash', function(status) {
var ske = page.evaluate(function() {
var json_text = document.querySelector("#ine-data").innerHTML,
json_values = JSON.parse(json_text);
return json_values.skey;
});
console.log(ske)
phantom.exit();
});
Though I'd note that the JSON in your example is invalid (missing a trailing }), so my example won't work without fixing that first!