Link to home
Start Free TrialLog in
Avatar of gudii9
gudii9Flag for United States of America

asked on

json example

Hi,

I am trying below example

http://www.w3schools.com/json/json_http.asp

http://www.w3schools.com/json/tryit.asp?filename=tryjson_function

when i change
<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window



above to below

<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id02").innerHTML = out;
}
</script>

</body>
</html>

Open in new window

I wonder why no output is coming.

i basically changed
  document.getElementById("id01").innerHTML = out;
to
  document.getElementById("id02").innerHTML = out;



4: Read the text file with an XMLHttpRequest

Write an XMLHttpRequest to read the text file, and use myFunction() to display the array:

XMLHttpRequest
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    myFunction(myArr);
    }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();
please advise

what is meaning of below line?

xmlhttp.onreadystatechange = function()

how putting in a .txt file example as above different from putting in a .js file example as below.

http://www.w3schools.com/json/json_files.asp

to me both looks same? please advise
Avatar of Big Monty
Big Monty
Flag of United States of America image

line 5 is still

<div id="id01"></div>

was that a typo or something more?
to answer your question:

xmlhttp.onreadystatechange = function() just means when you've made a connection back to the server and you're ready to receive back data
Avatar of gudii9

ASKER

Run »
Result Size: 668 x 489
<!DOCTYPE html>
<html>
<body>

<div id="id02"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id02").innerHTML = out;
}
</script>

</body>
</html>



<!DOCTYPE html>
<html>
<body>

<div id="id02"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id02").innerHTML = out;
}
</script>

</body>
</html>


 

Open in new window


when i change line 5 also as id02 then it worked as above and gave same below output
JavaScript Tutorial
HTML Tutorial
CSS Tutorial


so line 5 just defines div tag id which we are using in line 31?

what is the use of DIV element here?
please advise
Avatar of gudii9

ASKER

[quote]<div id="id01"></div>
<script>
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);
[/quote]

Open in new window



what is meaning of below code

<div id="id01"></div>
<script>
var myArray = [

Open in new window

are we saying div element id01 has the script that consist of myArray json array with 3 objects of display with links??
what is the use of DIV element here?

id02 is the DIV where the output goes
Avatar of gudii9

ASKER

id02 is the DIV where the output goes

how it goes to id02 DIV where we are telling it to go?

is it here?

 document.getElementById("id02").innerHTML = out;
}
</script>
greetings gudii9, , I will comment here, you are just learning how to use javascript, and the javascript DOM function-method of getElementById( ) is a very very Necessary function to use and understand !
as you can see the w3schools tutorial page for DOM methods at -
         http://www.w3schools.com/js/js_htmldom_methods.asp

here is some Page code that uses the getElementById( ) to change FOUR DOM elements on the HTML page -
<!DOCTYPE html>
<html>
<body>
First div<br>
<div id="div01">First Div Output</div>
Second div<br>
<div id="div02">Second Div Output</div>
First paragraf<br>
<p id="p01">First P Output</p>
<script>

document.getElementById("div01").innerHTML = '<p style="background: #ccf;">This id TOP DIV ad ID -<br>div01<br>with changed Content by Javascript <span id ="span01">?</span></p>';

// above code changes the First <div> content by the element ID "div01"

document.getElementById("span01").innerHTML = "<br>New Span Content, added by Javascript!";
document.getElementById("span01").style.fontSize = "143%";
// above code changes the  <span> content by the element ID "span01"

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    for(var i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("div02").style.backgroundColor = "#fcc";
    document.getElementById("div02").innerHTML = out;
}
// above code changes the Second <div> content by the element ID "div02"

document.getElementById("p01").style.border = "1px solid #0b0";
document.getElementById("p01").innerHTML = 'This is the NEW Javascript CHANGED Content for the P element';
// above code changes the first paragraph <p> content by the element ID "p01"
</script>

</body>
</html>

Open in new window


If you are learning Javascript, it is usually better to use a function-method like  document.getElementById( ) on several Different elements in some different ways ( innerHTML, style ) to see how and why it works.

ALSO, the use of the javascript  AJAX   -
    new XMLHttpRequest();
is a MUCH MORE complicated set of operations involving Browser and Server code and operations, this XMLHttpRequest();  if really NOT for javascript beginners, who try and do "copy and Paste" code, without understanding the complex set of operations needed to do javascript AJAX exchanges with success in browser "AJAX interface" display.
Avatar of gudii9

ASKER

Here is the actual link making backend function call for data

http://www.w3schools.com/js/js_json_http.asp
Avatar of gudii9

ASKER

onreadystatechange

is readystatechange of server ie webserver? is it like tomcat here? where is server located?
yes, it is referring to the web server.
Avatar of gudii9

ASKER

i do not have webserver on my local machine still below code ran fine. How it ran?
<!DOCTYPE html>
<html>
<body>
First div<br>
<div id="div01">First Div Output</div>
Second div<br>
<div id="div02">Second Div Output</div>
First paragraf<br>
<p id="p01">First P Output</p>
<script>

document.getElementById("div01").innerHTML = '<p style="background: #ccf;">This id TOP DIV ad ID -

<br>div01<br>with changed Content by Javascript <span id ="span01">?</span></p>';

// above code changes the First <div> content by the element ID "div01"

document.getElementById("span01").innerHTML = "<br>New Span Content, added by Javascript!";
document.getElementById("span01").style.fontSize = "143%";
// above code changes the  <span> content by the element ID "span01"

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    for(var i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("div02").style.backgroundColor = "#fcc";
    document.getElementById("div02").innerHTML = out;
}
// above code changes the Second <div> content by the element ID "div02"

document.getElementById("p01").style.border = "1px solid #0b0";
document.getElementById("p01").innerHTML = 'This is the NEW Javascript CHANGED Content for the P element';
// above code changes the first paragraph <p> content by the element ID "p01"
</script>

</body>
</html>

Open in new window

Avatar of gudii9

ASKER

document.getElementById

is more like
System.out.println in the java language?
it wouldn't :)

my guess is that you have IIS installed and are running the site through there.

document.getElementById

is more like
System.out.println in the java language

no, document.getElementById gets a reference to any control within the DOM (or page, to simplify things). if you wanted to get a reference to a field in your form that had an ID of "email" you would do:

var myEmailVariable = document.getElementById('email')

and if you wanted to see the value, you would do:

alert( myEmailVariable.value );
Avatar of gudii9

ASKER

<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window


in above example where are they calling the function with myarr(the array with urls and display) as argument so that it outputs to the text file?
this line send a request to the server, specifically to the text file defined in the url file
xmlhttp.open("GET", url, true);

this line waits for a successful connection AS WELL AS a response back from the server. In this case, the response is the opening of the text file
if (this.readyState == 4 && this.status == 200) {

this line parses the json response and puts that into a variable (it's an array object).
var myArr = JSON.parse(this.responseText);

this line goes through the array and outputs the data
myFunction(myArr);
? ? ? The Page code I posted that you ran comment  ID: 41826566  above is NOT using any AJAX, to use AJAX you must call this -
     new XMLHttpRequest();


which I did NOT do. Because, you are just learning javascript, and the complicated operations of the XMLHttpRequest() will require you to know much more about javascript than you now know.

In that page script, I was just trying to get you to USE the -
        document.getElementById("id");
to show you HOW that  getElementById( ) could be used on a page with javascript. I had hoped that you would CHANGE that page and add a <div> or a paragraph <p> with a different ID -
       <div id="newDiv">

and then place your own javascript code in the page to access that <div> with the -
      getElementById( )
and then change the "Content" inside that <div> with the -
      .innerHTML  
property

In javascript you must know how and why to use the   getElementById( )  before you can try the more advanced and difficult  XMLHttpRequest()
Avatar of gudii9

ASKER

where they are telling program to output data to
myTutorials.txt??
where would be its location of creation on my local windows laptop.
Lets say i have that file running at below path

C:\testFolder\test.html
if you use this as the web location (localhost in your case) of the AJAX conection -
        var url = "myTutorials.txt";

then place this text -
[
  {
  "display": "JavaScript Tutorial",
  "url": "http://www.w3schools.com/js/default.asp"
  },
  {
  "display": "HTML Tutorial",
  "url": "http://www.w3schools.com/html/default.asp"
  },
  {
  "display": "CSS Tutorial",
  "url": "http://www.w3schools.com/css/default.asp"
  }
]

Open in new window

into a plain text file named  -
       myTutorials.txt


and then place that text file in the same folder that you have the html file with the code you have presented here, with the -
       new XMLHttpRequest();

javascript in it.

if you are learning about the AJAX and the XMLHttpRequest()   you should start with an XMLHttpRequest()  that does NOT use any JSON, then when you learn more about the new XMLHttpRequest() , you can change it to do more complex display using the JSON
Avatar of gudii9

ASKER

if you use this as the web location (localhost in your case) of the AJAX conection -
        var url = "myTutorials.txt";

then place this text

i though program creates that text file and outputs those display , curls into it?
please advise
Avatar of gudii9

ASKER

C:\testFolder\test.html


<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window

i put muTutorials.txt in same above folder with below content
[
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

Open in new window


when i open the .html file it opens as blank page?

how i need to rename extension ot .json or .js etc instead of .html?
You as k -
      "i though program creates that text file"

The answer is NO , it does not create any file for any reason at any time. The text file "myTutorials.txt"  is NOT created by the  XMLHttpRequest()    javascript code, , as far as I know the XMLHttpRequest()  can NOT create a "FILE" anywhere. As I said you may need to learn more about javascript and the AJAX operations that are used for the  XMLHttpRequest()    to know what to do and how to do it in javascript
you get a BLANK page because you use such a blank TEXT display, all you have is an empty <div> as -
     <div id="id01"></div>

which will show Nothing , a blank page, unless javascript writes to the page

In the AJAX processes you need to have some form of ERROR CONTROL, so you can see if something does not work, ,

you might change the onreadystatechange   to -

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
    else {
    alert("AJAX return ERROR: as status - "+this.status);
    }
};

Open in new window


be sure to check the spelling for the text file as -
         myTutorials.txt
Avatar of gudii9

ASKER

<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Open in new window


above test.html is not working. just shows blank page? i wonder why?

<!DOCTYPE html>
<html>
<body>
First div<br>
<div id="div01">First Div Output</div>
Second div<br>
<div id="div02">Second Div Output</div>
First paragraf<br>
<p id="p01">First P Output</p>
<script>

document.getElementById("div01").innerHTML = '<p style="background: #ccf;">This id TOP DIV ad ID -<br>div01<br>with changed Content by Javascript <span id ="span01">?</span></p>';

// above code changes the First <div> content by the element ID "div01"

document.getElementById("span01").innerHTML = "<br>New Span Content, added by Javascript!";
document.getElementById("span01").style.fontSize = "143%";
// above code changes the  <span> content by the element ID "span01"

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    for(var i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("div02").style.backgroundColor = "#fcc";
    document.getElementById("div02").innerHTML = out;
}
// above code changes the Second <div> content by the element ID "div02"

document.getElementById("p01").style.border = "1px solid #0b0";
document.getElementById("p01").innerHTML = 'This is the NEW Javascript CHANGED Content for the P element';
// above code changes the first paragraph <p> content by the element ID "p01"
</script>

</body>
</html>

Open in new window


above works fine with 3 links and all of them are leading to correct pages
? ? ?
I am trying to help you with this, but in your last comment you have just RE POSTED the same exact code that you have posted BEFORE, no changes at all. . You did not do anything but copy and paste the SAME code, , and you say you got the exact SAME results (one seems to work ,and one seems not to work) that you said in comments you have here before, same code and results. You need to CHANGE this code, by your own understandings of the javascript operations, you can not learn anything by just doing the "COPY and PASTE", without trying to find out what the javascript functions and elements are doing. and how you can change them to have different page display and results.

If you have questions about what the javascript variables, functions, arrays, objects, and methods are for, or what they do or how to change them , then ask questions about that, ask about what you do not understand/ I do not know that to say here you help you, if all you do is paste code.
Just some information about the javascript  XMLHttpRequest()  object, , it is likely that this XMLHttpRequest() will NOT work on the browser computer file system, the "localhost" as you term it. The XMLHttpRequest() operations usually REQUIRE that the XMLHttpRequest()  .send( ) method is to a URL HTTP server address, in the SAME domain name that the html file has come from. So it is likely that this will not work UNTIL you have a remote WEB SERVER with your test.html   file and the myTutorials.txt  file On that server file system, and you use the remote server for all XMLHttpRequest() transfers.
If the OP is accessing the page like

localhost/index. asp

Then it'll work fine as long it's in the same domain (web root). If index. asp is being opened through the file system it will not work. It doesn't matter if it's a remote web server or local one, as long as the relative format is used it'll work
@big monty, , in javascript on a windows OS this does NOT work -
    ajax2.open("GET", "localhost/myTutorials.txt", true);

this is in the browser, not in a system console? ?

Although on windows you can set up a local "LAMP" server arrangement, and or a windows server bridge, , but that's not part of this question?
Works fine for me... You can even simplify it to

    ajax2.open("GET", "myTutorials.txt", true);
Avatar of gudii9

ASKER

can you post code of the full file?
If you're using iis,  what you have should work...

What's the exact URL you see when  you open open your browser? This'll tell us if you're using iis or opening it directly from the file explorer
Avatar of gudii9

ASKER

If you're using iis,  what you have should work...

What's the exact URL you see when  you open open your browser? This'll tell us if you're using iis or opening it directly from the file explorer

i am saving those files as .html files like test.html on my desktop. Then right click on the file and open with chrome etc browser or double click on them to open in default browser
Ok so you're NOT using a web server, so as Slick mentioned earlier, this won't work. You need to set up IIS on your system, assuming you're running Windows, all you should need to do is do Add/Remove options and select it there. A quick Google search will explain it in more details.

Once you have IIS installed it should work
Avatar of gudii9

ASKER

what is IIS. I am a java developer. no clue what is IIS
SOLUTION
Avatar of Big Monty
Big Monty
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@gudii9
I have told you before that u are doing things in code work that you do not have the knowledge or experience for. If you are a JAVA developer,  than get a REMOTE SERVER HOST that is a JAVA, with Tomcat LAMP, and then to the extreamly simple  XMLHttpRequest()  example that you gave as a LEARNING code here -
      http://www.w3schools.com/js/js_json_http.asp
using a remote server. The  XMLHttpRequest() is ONLY used for dynamic returns (usually from a database) for PAGE user interactive activities. You are just going around in circles, with your comments here. Please ask about What you are trying to LEARN here, you seem to know little about javascript, and installing a IIS on your machine will probably not teach you what you need to learn. So I ask you now.



WHAT DO YOU NEED TO LEARN? ? ?
Avatar of gudii9

ASKER

to run which code i need IIS and to run which code i do not need IIS.

I am trying to learn JSON and see why the examples on json from w3school not running with minor tweaks. please advise
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of gudii9

ASKER

BUT in javascript any external connections like AJAX XMLHttpRequest() or the newer WebSocket( )  WILL NOT WORK in a browser, because the XMLHttpRequest() requests a connection to the ajax URL which does not exist in a "File System" environment. So to have ANY javascript with the XMLHttpRequest() you MUST get a windows operating system server "SET UP" to handle web connection request that are use in the XMLHttpRequest() operation.

any good end to end examples, links on this?(prefrably using java web servers like tomcat etc rather than .Net engines(actually either is fine)
@gudii9 , , , I have never done a JAVA  Apache Tomcat as a local server on a windows machine. I have done a LAMP (for PHP) as a local server on a windows machine. You may should ask this question in the experts exchange category of JAVA, to have people that have actually done this , Apache Tomcat as a local server , to help you with suggestions.