Can I do the following
lets assume I get page content like
var data = $('html').html();
if the page contain object
mydata = {
test:"mydata"
}
can I access this object some how ?? I want to get the info stored in that object like
console.log(data.mydata);
and it should return
test:"mydata"
Is there are way to get an object from JQuery data object like
var data = $('html').html();
note: the object in script tag like this
<script>
window.mydata = {
test:"mydata"
}
</script>
as I said I'm trying to access the data through jquery object or returned dom
var data = $('html').html();
I don't have direct access to window.mydata
is there anyway to access window.mydata from the data returned from this function
$('html').html();
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
<p>Lorem Ipsum</p>
<script type="text/javascript">
var data = $('html').html();
var mydata = {
test:"mydata"
}
console.log(data);
console.log(mydata); // Object { test: "mydata" }
console.log(mydata.test); // "mydata"
</script>
</body>
</html>
You can attach data in a DOM element using the .data API and retrieve it in the same format.
In your case it will be something like
<script>
window.mydata = {
test:"mydata"
}
$("html").data("someKey", window.myData);
// later retrieve it
var data = $("html").data("someKey");
console.log(data.test); /* should print mydata */
</script>
Update (after OP comment)
// assign your string which you get from Amazon to this variable
var fileContents = 'Some text which has script tags <script>window.mydata = {test:"mydata"}<\/script>';
$("#codeInject").html(fileContents).hide();
console.log(window.mydata);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="codeInject"></div>
Related
how is going?
So I've made this API code here:
index.php
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// API Endpoint
var x = document.getElementsByClassName("name1");
var y = document.getElementsByClassName("name2");
var i;
var url = 'mysite.org/api.php'
// Fetch the remote file
fetch(url)
.then(function (request) {
// Take the request and parse the data as json
return request.json()
})
.then(function (json) {
// line1
var name1 = json.item1.name // current song title
x.innerHTML = name;
// line2
var name2 = json.item2.name // current song title
y.innerHTML = name2;
});
});
</script>
</head>
<body>
<h5>Hello</h5>
<div class="name1"></div>
<div class="name2"></div>
</body>
</html>
api.php ((the json is generated by array from a cicle while))
{"item1":{"id":"1","name":"Daniel"},"item2":{"id":"2","name":"Kalifa"}}
So this code works fine and I can see item1 inside div id name1 and item2 inside div id name2. But I dunno why but when I try to change the elements from ID to CLASS it doesn't work.
Any ideas?
Loop over the object keys in the JSON, get the element with the same class, and assign its innerHTML.
Object.entries(json).forEach(([name, value]) =>
document.getElementsByClassName(name)[0].innerHTML = value);
When you use getElementsByClassName() you need to index it to get the first element with that class.
I am trying to figure out how to extract a variable from a giant string of html. A simplified example is below:
Update Here is a screen shot of trying to use the common approach called out below. Doing something as simple as test['foo'] doesn't work. This is a string returned from a server and is never loaded into the actual document or window. It's just an html object that's kept in memory.
https://jsfiddle.net/hvpvg3o4/
HTML
<div id="test"> <!-- div is just for jsfiddle -->
<script>
var test = { // <-- I WANT YOU!
foo: 'bar'
};
var somethingIDontWant = 1;
var iDontCareAboutYouEither = {
blag: 1 + 1
};
</script>
</div>
JavaScript
var testTag = document.getElementById('test');
var scriptTag = testTag.getElementsByTagName('script');
// var testObj = ?;
I was hoping that I could just get the text from the script tag and either run eval or some JSON.parse, but since there's other stuff within the script tag, I can't
Is there some way to extract a variable from a script tag or some fancy regex to do so?
Try this
console.log(test['foo'])
console.log(somethingIDontWant)
console.log(iDontCareAboutYouEither['blag'])
<div id="test">
<script>
var test = {
foo: 'bar'
};
var somethingIDontWant = 1;
var iDontCareAboutYouEither = {
blag: 1 + 1
};
</script>
</div>
If the object that is desired is declared in the global scope. The desired object will be accessible anytime a script tag is declared.
Example:
<HTML>
<HEAD>
<SCRIPT>
var test = {
foo: 'bar'
};
var somethingIDontWant = 1;
var iDontCareAboutYouEither = {
blag: 1 + 1
};
</SCRIPT>
</HEAD>
<BODY>
<DIV>UGLY HTML</DIV>
<SCRIPT>
//INSERT CUSTOM SCRIPT FOR ACCESSING DESIRED OBJECT//
console.log(test)
</SCRIPT>
</BODY>
</HTML>
The console can still access var test..even in later defined script in the body...
Output:
{foo: 'bar'}
Is it possible to get out the code that is inside a json file? You can have a look at it here: http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4
What is the code or method should I use to put the html code inside any raw div?
I tried to use jsonp, but there is a mistake:
unexpected token <
<script>
function myFunction(data){
var arr = JSON.parse(data);
document.getElementById('advBlock').innerHTML = arr;
}
</script>
<script type="text/javascript" src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
The JSONP data is already a Javascript object, not a JSON string, so you don't need to parse it:
<div id="advBlock"></div>
<script>
function myFunction(data) {
document.getElementById('advBlock').innerHTML = data;
}
</script>
<script src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
<div id="advBlock"></div>
<script src="http://www.bryzgalov.directadvert.ru/show.cgi?adp=768&json=4&callback=myFunction"></script>
<script> function myFunction(data) { document.getElementById('advBlock').innerHTML = data; } </script>
You have to add the script before your function call.
We are working with the facebook api and have stored the data retrieved in a JSON format into an array. We would like to display this information in a different HTML page but are unable to do so, please help regarding this?
<p id="demo"></p>
<script> var str=""; var names1 = new Array(); //creating names1 array
getFriendsList = function() { //calling from another function
FB.api('me/taggable_friends', function(response) {
for (var i = 0; i <= response.data.length; i++) {
names1.push(response.data[i].name); str=str+"<br>"+"<br>"+names1[i]; //appending thenames to str
document.getElementById("demo").innerHTML = str;//displaying the element in the html page.
}
});
} </script>
I am still a little confused by your question, but I am assuming that you want to know how to display the elements from an array onto your HTML page.
If this isn't what you are asking, then just expand on your question and I will see how I can help.
Explanation for code below
You are accessing your JavaScript file in your HTML by adding the <script type="text/javascript" src="app.js"></script> reference.
The JavaScript is creating a simple array called myArray. We then loop through our array and display content using the document.write(...); line.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
JavaScript
var myArray = [1, 2, 3];
// for each loop
for (var i in myArray) {
document.write(myArray[i]);
}
So Im building a set of functions to call inside a page. They all reside inside a file "seeingPlotFunc.js" and I call it and some of the functions inside the body of the html file. There are dome global empty arrays declared at the beginning, but when the functions that update them are called, they still return empty:
relevant code in seeingPlotFunc.js:
var seeingPlot = seeingPlot || {};
seeingPlot.jsondata1 = [];
seeingPlot.initialData = function () {
d3.json(seeingPlot.initialphp1, function(error1, data1) {
// after getting the data it's parsed into array
data1.forEach(function(d){
d.date = seeingPlot.parseDate(d.date);
d.f_tok = +d.f_tok;
seeingPlot.jsondata1.push(d);
})
})
}
and the relevant code in the html file:
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript"
src="JS/seeingPlotFunc.js"></script>
<script type="text/javascript">
seeingPlot.initialData();
console.log(seeingPlot.jsondata1);
</script>
</body>
and it returns an empty array. If I call it just after pushing all the data into the array it returns the proper value. I've been banging my head with this one for some LONG hours...
I think the function in d3.json gets called asynchronously. So you need wait for a callback function and only then will you get your array.
seeingPlot.initialData = function (OnComplete) {
d3.json(seeingPlot.initialphp1, function(error1, data1) {
// after getting the data it's parsed into array
data1.forEach(function(d){
d.date = seeingPlot.parseDate(d.date);
d.f_tok = +d.f_tok;
seeingPlot.jsondata1.push(d);
})
OnComplete();
})
}
And your HTML
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript"
src="JS/seeingPlotFunc.js"></script>
<script type="text/javascript">
seeingPlot.initialData(function ()
{
console.log(seeingPlot.jsondata1);
});
</script>
</body>