JavaScript and JSON

[DougJrs]

Good Afternoon All,

I am working on a project to write something that would allow others
to retrieve data about events that I am hosting. I was trying to
follow the same model that Google (http://code.google.com/apis/gdata/
json.html) and Yahoo (http://developer.yahoo.com/common/json.html)
have used with the JSON data being wrapped in a function call.

I have created a servlet that can have parameters passed to it and it
will return data like this:
myFunction([{title:"Event 1",url:"http:\/\/www.event.com",city:"City
Name",state:"New York"},{title:"Event 2",url:"http:\/\/
www.event.com",city:"City Name",state:"Kansas"},{title:"Event
3",url:"http:\/\/www.event.com",city:"City Name",state:"Florida"},
{title:"Event 4",url:"http:\/\/www.event.com",city:"City
Name",state:"Texas"}]);


When I place the following JavaScript on a page the result I get back
is: "[object Object][object Object][object Object][object Object]"

<script>
function myFunction(root) {

var html = root;

document.getElementById("agenda").innerHTML = html.join("");
}
</script>

<script src="http://localhost:8080/Web_Search_API/Jtest?
alt=4&callback=myFunction">
</script>


I tried to access the first item's details by altering the JavaScript
to this:

<script>
function myFunction(root) {

var html = "<h3>"
var data = root || [];
var entry = data[1];
var title = entry.title;
var url = entry.url;
html.push(title);
html.push(url);
html.push(root);

document.getElementById("agenda").innerHTML = html.join("");
}
</script>

When I made that change the page remained blank.

Can anyone point me to what I am doing wrong?

Thanks,
Doug

 

[Thomas 'PointedEars' Lahn]

Good Afternoon All,

Good evening.

I am working on a project to write something that would allow others
to retrieve data about events that I am hosting. I was trying to
follow the same model that Google (http://code.google.com/apis/gdata/
json.html) and Yahoo (http://developer.yahoo.com/common/json.html)
have used with the JSON data being wrapped in a function call.

I have created a servlet that can have parameters passed to it and it
will return data like this:
myFunction([{title:"Event 1",url:"http:\/\/www.event.com",city:"City
Name",state:"New York"},{title:"Event 2",url:"http:\/\/

You don't have to escape *forward* slashes within string literals.

www.event.com",city:"City Name",state:"Kansas"},{title:"Event
3",url:"http:\/\/www.event.com",city:"City Name",state:"Florida"},
{title:"Event 4",url:"http:\/\/www.event.com",city:"City
Name",state:"Texas"}]);

When I place the following JavaScript on a page the result I get back
is: "[object Object][object Object][object Object][object Object]"

As expected. "[object Object]" is the string representation of Object
objects in some implementations.

<script>

<script type="text/javascript">

is required.

function myFunction(root) {

var html = root;

document.getElementById("agenda").innerHTML = html.join("");
}
</script>

<script src="http://localhost:8080/Web_Search_API/Jtest?
alt=4&callback=myFunction">
</script>


I tried to access the first item's details by altering the JavaScript
to this:

<script>
function myFunction(root) {

var html = "<h3>"
[...]
html.push(title);
html.push(url);
html.push(root);

document.getElementById("agenda").innerHTML = html.join("");
}
</script>

When I made that change the page remained blank.

And you got an error message.

Can anyone point me to what I am doing wrong?

<http://www.jibbering.com/faq/#debugging>

Your `html' variable stores a primitive string value that is converted to a
String object with a property accessor. String objects don't have a push()
method or a join() method; those are properties of Array.prototype, and
inherited by Array objects through the prototype chain.

var html = ["<h3"];

aso. would work. However, you should consider something along this instead:

function MyEvent(title, url, city, state)
{
this.title = title || "";
this.url = url || "";
this.city = city || "";
this.state = state || "";
}

MyEvent.prototype.toString = function() {
// add delimiters where necessary, e.g. [..., ...].join("delim")
return this.title + this.url + this.city + this.state;
};

Then you can do:

myFunction([
new MyEvent("Event 1", "http://www.event.com", "City Name", "New York"),
new MyEvent("Event 2", "http://www.event.com", "City Name", "Kansas"),
new MyEvent("Event 3", "http://www.event.com", "City Name", "Florida"),
new MyEvent("Event 4", "http://www.event.com", "City Name", "Texas")
]);


PointedEars

 

[Jorge]

Good Afternoon All,

I am working on a project to write something that would allow others
to retrieve data about events that I am hosting.  I was trying to
follow the same model that Google (http://code.google.com/apis/gdata/
json.html)  and Yahoo (http://developer.yahoo.com/common/json.html)
have used with the JSON data being wrapped in a function call.

I have created a servlet that can have parameters passed to it and it
will return data like this:
myFunction([{title:"Event 1",url:"http:\/\/www.event.com",city:"City
Name",state:"New York"},{title:"Event 2",url:"http:\/\/www.event.com",city:"City Name",state:"Kansas"},{title:"Event
3",url:"http:\/\/www.event.com",city:"City Name",state:"Florida"},
{title:"Event 4",url:"http:\/\/www.event.com",city:"City
Name",state:"Texas"}]);

When I place the following JavaScript on a page the result I get back
is: "[object Object][object Object][object Object][object Object]"

<script>
  function myFunction(root) {

    var html = root;

    document.getElementById("agenda").innerHTML = html.join("");
  }
</script>

root is an array of objects. When you type html.join(""), you're
asking the JS engine to turn those objects into strings, and then
concatenate them (their string representations). The string
representation of those objects is the several "object object"s that
you're seeing.

You're going to need to dig deeper into the root[]:

root[n].title, root[n].url, root[n].city, root[n].state hold the data
that you're looking for:

function myFunction(root) {
var txt= [], n= root.length;
while (n--) {
txt.push("title : "+ root[n].title);
txt.push("url : "+ root[n].url);
txt.push("city : "+ root[n].city);
txt.push("state : "+ root[n].state);
}
document.getElementById("agenda").innerHTML = txt.join("<br>");
}

 

[DougJrs]

Good Afternoon All,

I am working on a project to write something that would allow others
to retrieve data about events that I am hosting.  I was trying to
follow the same model that Google (http://code.google.com/apis/gdata/
json.html)  and Yahoo (http://developer.yahoo.com/common/json.html)
have used with the JSON data being wrapped in a function call.

I have created a servlet that can have parameters passed to it and it
will return data like this:
myFunction([{title:"Event 1",url:"http:\/\/www.event.com",city:"City
Name",state:"New York"},{title:"Event 2",url:"http:\/\/www.event.com",city:"City Name",state:"Kansas"},{title:"Event
3",url:"http:\/\/www.event.com",city:"City Name",state:"Florida"},
{title:"Event 4",url:"http:\/\/www.event.com",city:"City
Name",state:"Texas"}]);

When I place the following JavaScript on a page the result I get back
is: "[object Object][object Object][object Object][object Object]"

<script>
  function myFunction(root) {

    var html = root;

    document.getElementById("agenda").innerHTML = html.join("");
  }
</script>

root is an array of objects. When you type html.join(""), you're
asking the JS engine to turn those objects into strings, and then
concatenate them (their string representations). The string
representation of those objects is the several "object object"s that
you're seeing.

You're going to need to dig deeper into the root[]:

root[n].title, root[n].url, root[n].city, root[n].state hold the data
that you're looking for:

function myFunction(root) {
  var txt= [], n= root.length;
  while (n--) {
    txt.push("title : "+ root[n].title);
    txt.push("url : "+ root[n].url);
    txt.push("city : "+ root[n].city);
    txt.push("state : "+ root[n].state);
  }
  document.getElementById("agenda").innerHTML = txt.join("<br>");

}

Thank you. I was almost there with one of my tries, but your help got
the all of the way there.

Doug

 

[DougJrs]

Good Afternoon All,

Good evening.

I am working on a project to write something that would allow others
to retrieve data about events that I am hosting.  I was trying to
follow the same model that Google (http://code.google.com/apis/gdata/
json.html)  and Yahoo (http://developer.yahoo.com/common/json.html)
have used with the JSON data being wrapped in a function call.

I have created a servlet that can have parameters passed to it and it
will return data like this:
myFunction([{title:"Event 1",url:"http:\/\/www.event.com",city:"City
Name",state:"New York"},{title:"Event 2",url:"http:\/\/

You don't have to escape *forward* slashes within string literals.

www.event.com",city:"City Name",state:"Kansas"},{title:"Event
3",url:"http:\/\/www.event.com",city:"City Name",state:"Florida"},
{title:"Event 4",url:"http:\/\/www.event.com",city:"City
Name",state:"Texas"}]);

When I place the following JavaScript on a page the result I get back
is: "[object Object][object Object][object Object][object Object]"

As expected.  "[object Object]" is the string representation of Object
objects in some implementations.

<script>

  <script type="text/javascript">

is required.

  function myFunction(root) {
    var html = root;

    document.getElementById("agenda").innerHTML = html.join("");
  }
</script>

<script src="http://localhost:8080/Web_Search_API/Jtest?
alt=4&callback=myFunction">
</script>

I tried to access the first item's details by altering the JavaScript
to this:

<script>
  function myFunction(root) {

var html = "<h3>"
    [...]
    html.push(title);
    html.push(url);
    html.push(root);

    document.getElementById("agenda").innerHTML = html.join("");
  }
</script>

When I made that change the page remained blank.

And you got an error message.

Can anyone point me to what I am doing wrong?

<http://www.jibbering.com/faq/#debugging>

Your `html' variable stores a primitive string value that is converted toa
String object with a property accessor.  String objects don't have a push()
method or a join() method; those are properties of Array.prototype, and
inherited by Array objects through the prototype chain.

  var html = ["<h3"];

aso. would work.  However, you should consider something along this instead:

  function MyEvent(title, url, city, state)
  {
    this.title = title || "";
    this.url   = url   || "";
    this.city  = city  || "";
    this.state = state || "";
  }

  MyEvent.prototype.toString = function() {
    // add delimiters where necessary, e.g. [..., ...].join("delim")
    return this.title + this.url + this.city + this.state;
  };

Then you can do:

  myFunction([
    new MyEvent("Event 1", "http://www.event.com", "City Name", "New York"),
    new MyEvent("Event 2", "http://www.event.com", "City Name", "Kansas"),
    new MyEvent("Event 3", "http://www.event.com", "City Name", "Florida"),
    new MyEvent("Event 4", "http://www.event.com", "City Name", "Texas")
  ]);

PointedEars

Thank you!

The url is being escaped by the call to that hte servlet is making to
create the JSON responce JSONObject.escape(url). The myFunction code
that you provided is almost exactly what I have coded in the java
servlet.

Doug

 

[Thomas 'PointedEars' Lahn]

[snipped 80+ irrelevant lines]

However, you should consider something along this instead:

function MyEvent(title, url, city, state)
{
this.title = title || "";
this.url   = url   || "";
this.city  = city  || "";
this.state = state || "";
}

MyEvent.prototype.toString = function() {
// add delimiters where necessary, e.g. [..., ...].join("delim")
return this.title + this.url + this.city + this.state;
};

Then you can do:

myFunction([
new MyEvent("Event 1", "http://www.event.com", "City Name", "New York"),
new MyEvent("Event 2", "http://www.event.com", "City Name", "Kansas"),
new MyEvent("Event 3", "http://www.event.com", "City Name", "Florida"),
new MyEvent("Event 4", "http://www.event.com", "City Name", "Texas")
]);
[...]

Thank you!

You are welcome. Please trim your quotes.

The url is being escaped by the call to that hte servlet is making to
create the JSON responce JSONObject.escape(url).

Parse error.

The myFunction code that you provided is almost exactly what I have coded
in the java servlet.

You are mistaken, I have not provided any such function. Instead, I have
showed a way to define your own objects, so that you can pass references to
them as elements of an array to *your* myFunction() function, where their
string representation (as returned by the toString() methd) would
automatically be used with Array.prototype.join().


PointedEars