Using JS to manipulate in page script - javascript

I currently have an on-page script.
<script type='text/javascript' data-shl-lottie-script="1614423430104">
LottieInteractivity.create({
"mode": "scroll",
"player": "[data-shl-player='1614423430104']",
"container": "#first",
"actions": [
{"visibility": [0,1],"type": "seek","frames": [0,100]},
{"visibility": [0,1],"type": "seek","frames": [100,300]}
]
});
</script>
I want to be able to interactively manipulate this script to add (or remove) additional actions. I'm already using Regex to manipulate both the "mode" and "container". Other than using Regex (love and hate), is there some way that I'm overlooking for easily manipulating the actions section of this script using JS? I feel like the actions are just an array of objects, but I can only get them as a string and can't figure out if it is possible to convert them for manipulation and then add them back into the script on page.

Just replace the object
<script>
const myObject = {
"mode": "whatever",
"player": "[data-shl-player='1614423430104']",
"container": "#first",
"actions": [{
"visibility": [1110, 1],
"type": "seek",
"frames": [0, 100]
},
{
"visibility": [0, 1111],
"type": "seek",
"whatever": [100, 300]
}
]
}
myObject.mode="something else"
</script>
<script type='text/javascript' data-shl-lottie-script="1614423430104">
LottieInteractivity.create(myObject);
</script>

Related

JSON.stringify on javascript with WSO2

i'm trying to transform the following JSON in input:
{
"operation": "create",
"id": "$1",
"name": "esempio create",
"type": "CAR",
"status": 0,
"country": "JAP",
}
in this new format:
{
"operations": [
{
"operation": "C",
"element": {
"type": "CAR",
"other_data": {"id":$1, "name": "example", "status":0, "country":"JAP"}
}
}
]
}
i'm using the following method, where element is the JSON mentioned above:
var js=JSON.stringify({"operation":"C", "element":{"type": element.type , "other_data":{element}}});
in every javascript compiler it works correctly, when i try to apply it on WSO2 i'm not able to save the page because the IDE (Integration Studio) detect an error on javascript.
Do you know any other way to do it or tell me why i'm not able to save it?
Thanks
Your syntax is correct but Integration Studio doesn't seem to like inline access of JSON elements when creating the JSON. Also you don't need JSON.stringify here. Following is a workaround with the Script Mediator. I assume you need t delete type elemt from other_data as well.
var element = mc.getPayloadJSON();
var js = {"operation":"C", "element":{"type": "x" , "other_data":"x"}};
js.element.type = element.type;
delete element.type;
js.element.other_data = element;
mc.setPayloadJSON(js);
Alternatively you can use the Payloadfactory Mediator along with Enrich mediator if you are using the latest Micro Integrator.
<payloadFactory media-type="json">
<format>{
"operations": [
{
"operation": "C",
"element": {
"type": $1,
"other_data": $2
}
}
]
}</format>
<args>
<arg evaluator="json" expression="$.type"/>
<arg evaluator="json" expression="$"/>
</args>
</payloadFactory>
<enrich>
<source clone="false" xpath="json-eval($.operations[0].element.type)"/>
<target action="remove" type="body"/>
</enrich>

Is there a way to update items in an array with JsonPatch?

The API to be invoked uses JsonPatch. The following is a sample JSON.
{ "hello": false
, "array1":
[ { "subarray": [ "k2", "k1"] }
, { "subarray": [ "k1"] }
]
}
I would like to update both the subarrays (elements of the array1). There could be N number of elements/items in array1 that I'm not aware of when calling this API.
Now I can do the following if I am aware of the the size of array1.
[{ "op": "add", "path": "/array1/0/subarray/0", "value": "gk" }]
[{ "op": "add", "path": "/array1/1/subarray/0", "value": "gk" }]
But since I'm not aware of the the size of array1, it does not seem that this can be achieved using JsonPointer. Is there something that can be done to do an update that targets all the elements of array1 (i.e all the subarrays) in one go? Something like this:
[{ "op": "add", "path": "/array1/*/subarray1/0", "value": "gk-new" }]
After invocation, the resulting subarrays should have an additional element "gk-new" in addition to what they have?
There is no wildcard support in JsonPatch or JsonPointer. Therefore, what is asked in the question is not possible.

Is there a way to read <script> tag contents

I have a site in which there is a <script> with a JSON inside. With user script in Tampermonkey, I want to get that JSON to work with it later.
So I thought that I can get it with getElemntsByTagName("script"), but I couldn't figure out how to get string out of it.
How do you get a string from getElemntsByTagName("script"), like console.log does?
Is there an easier way to do so?
window.wpProQuizInitList = window.wpProQuizInitList || [];
window.wpProQuizInitList.push({
id: '#wpProQuiz_67',
init: {
quizId: 67,
mode: 2,
globalPoints: 76,
timelimit: 0,
resultsGrade: [0],
bo: 3,
qpp: 0,
catPoints: [76],
formPos: 0,
lbn: "\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0438 \u0442\u0435\u0441\u0442",
json: {
"2944": {
"type": "single",
"id": 2944,
"catId": 0,
"points": 1,
"correct": [0,0,1,0]
},
"2945": {
"type": "single",
"id": 2945,
"catId": 0,
"points": 1,
"correct": [0,1,0,0]
},
"2946": {
"type": "single",
"id": 2946,
"catId": 0,
"points": 1,
"correct": [0,0,1,0]
},
…
}
}
}
You can use document.querySelector to get the first <script> element; there is no need to obtain a live HTMLCollection to get one element. You can then read its textContent.
let value = document.querySelector('script').textContent;
getElementsByTagName("script") will return an HTMLCollection which contains a list of script tags. You can get the text of the first script tag like this:
getElementsByTagName("script")[0].innerText

Leaflet + GeoJson converted from OSM Data - Relations

I'm trying to display bicycle relations which I downloaded from geofabrik, converted with osmconvert, filtered with osmfilter and converted to geojson. At the moment Leaflet displays line strings and nodes correctly on the map. The problem is with data from relations that are included in the file. Here is a part of my GeoJson file (I won't include whole file because it's just too big):
var rower = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "way/27149688",
"properties": {
"type": "way",
"id": "27149688",
"tags": {
"agricultural": "no",
"bicycle": "yes",
"highway": "residential",
"maxweightrating:hgv": "24",
"maxweightrating:hgv:condtitional": "none # marked",
"name": "Mikołaja Reja",
"source:maxweightrating:hgv": "PL:sign_B-5-note"
},
"relations": [{
"role": "",
"rel": "4046118",
"reltags": {
"colour": "blue",
"description": "Leśna trasa rowerowa, preferowany rower górski / Forest track, Mountain Bike preferred",
"lcn_ref": "niebieski",
"name": "Szlak Trójmiejski",
"network": "rcn",
"route": "bicycle",
"type": "route"
}
}],
"meta": {
"timestamp": "2014-04-17T11:58:45Z",
"version": "20",
"changeset": "21747999",
"user": "wojtas82",
"uid": "729745"
},
"tainted": true
},
"geometry": {
"type": "LineString",
"coordinates": [[
18.5024141,
54.4354139
],[
18.503622,
54.4353485
],[
18.5053714,
54.4352858
]]
}
}]
};
As you can see relations are in square brackets. I wish to display different colours of tracks depending on relations>reltags>colour tag. Here is my main html file (actually the party that doesn't work):
var rower2 = L.geoJson(rower, {
style: function (feature) {
switch (feature.properties.relations) {
case 'blue':
return {color: "#ff0000"};
case 'red':
return {color: "#0000ff"};
}
}
}).addTo(map);
I tried to modify this part (feature.properties.relations) to (feature.properties.relations.reltags.colour) but it doesn't work. Is there any way to fix this problem?
This isn't working because feature.properties.relations is an array (hence the surrounding brackets) containing objects. To access the objects stored in that array you can use array notation like this: feature.properties.relations[0] for the first object in the array, feature.properties.relations[1] for the second object in the array and so forth. So if you want to access the colour property of the reltags object in the first relation object in the array you should use feature.properties.relations[0].reltags.colour
var rower2 = L.geoJson(rower, {
style: function (feature) {
switch (feature.properties.relations[0].reltags.colour) {
case 'blue':
return {color: "#ff0000"};
case 'red':
return {color: "#0000ff"};
}
}
}).addTo(map);
But my guess is that you're gonna be running into trouble because OSM did use an array for relations with a purpose. My guess is that there can be multiple relations for a feature, and thus it could have multiple colors.
Here's a working example on Plunker: http://plnkr.co/edit/EjCCsb?p=preview
PS. I'm wondering why you're returning '#FF0000' when the case is blue, because that's the code for red, same thing with case red, you're returning '#0000FF' which is the code for blue. Other than that the code is working fine when you use feature.properties.relations[0].reltags.colour as you can see in the example i supplied.

Create an object dynamically from JSON

Can I create an object dynamically from JSON?
This is one of some in array:
values: [{
"$type": "Entrance, DataModel",
"EntranceDeviceData": {
"$type": "DeviceData, DataModel",
"Watchdog": 0,
"Inputs": {
"$type": "Int16[], mscorlib",
"$values": [0, 0]
},
"Outputs": {
"$type": "Int16[], mscorlib",
"$values": [0, 0]
},
"Faults": {
"$type": "Int16[], mscorlib",
"$values": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
"StandingCommand": 0
},
"Vehicle": null,
"NextStates": {
"$type": "System.Collections.Generic.List`1[[System.String, mscorlib]], mscorlib",
"$values": ["CarApproachingBarrier"]
},
"Repository": {
"$type": "System.Collections.Generic.Dictionary`2[[System.String, mscorlib],[System.Object, mscorlib]], mscorlib"
},
"Direction": 0,
"Name": "Entrance",
"Position": "0,0,0,0",
}, {...another object...
}, {...another one...
}
]
This both JSON objects are different. Can I create an object (for every other JSON object) without knowing in advance it's properties? How can I do it?
(I heard something that it possible, but maybe I didn't understand well the person who said that).
What you gave as examples of JSON in your original code above is Javascript's way of defining literal objects. json1 and json2 already ARE javascript objects, no need to create them.
// original code from question
var json1 = {
"mysex": "female",
"yoursex": "male",
"location": {
"lat": "48",
"lng": "1"
},
"description": "descr2",
"owner": "zBYnfuu8DXEwMttwZ",
"nickname": "user",
"_id": "1"
};
As nnnnnn pointed out below JSON is most commonly used to refer to a STRING containing code formatted as above, that would be:
var json1_as_string = '{
"mysex": "female",
"yoursex": "male",
"location": {
"lat": "48",
"lng": "1"
},
"description": "descr2",
"owner": "zBYnfuu8DXEwMttwZ",
"nickname": "user",
"_id": "1"
}';
To get from such a String to an actual Javascript Object you would need to parse it:
var json1 = JSON.parse(json1_as_string);
the opposite direction (Javascript Object to String) is achieved by stringify:
var json1_as_string = JSON.stringify(json1);
see https://developer.mozilla.org/en-US/docs/Using_native_JSON
p.s.
It does seem strange that these two very different objects have the same "_id".
You've changed the question completely, and I'm trying to understand what you are asking.
This both JSON objects are different. Can I create an object (for
every other JSON object) without knowing in advance it's properties?
How can I do it?
Yes, in Javascript you can create objects without knowing their properties in advance. Javascript is not strongly typed, and it has no classes. So there's absolutely no problem
with having objects with different properties.

Categories

Resources