I am new to Javascript and trying to extract some text stored in an object.

The object is defined as an object literal and is passed to a function in a Javascript script that calls the function. The script (and object) have this structure:

foo({
  "query": {
  "count": "2",
  "created": "2009-07-25T08:17:54Z",
  "lang": "en-US",
  },
  "results": {
   "result": [
    {
     "abstract": "<b>Pizza</b> Hut®. Order Online for Delivery or Carry-out. Fast &amp; Easy.",
     "title": "<b>Pizza</b> Hut"
    },
    {
     "abstract": "Official site of Domino's <b>Pizza</b> delivery chain, which offers thin crust, deep dish, and hand tossed <b>pizzas</b> with a variety of side items and beverages. Site <b>...</b>",
     "title": "Domino's <b>Pizza</b>"
    }
   ]
  }
 }
});

The object is passed to to a callback function named "foo":

function foo(o){
  var out = document.getElementById('container');
  out.innerHTML = o.query.count;
}

My Problem: I know how to print out the query count variable using the callback function above, but I don't know how to print out the the title of the first result in the results array.

How can I change the callback function to display the first result title? And also, is there a foreach statement, where I could print out all the titles from all the results?

Thanks!

UPDATE: JSBIN for this code is at:

I am new to Javascript and trying to extract some text stored in an object.

The object is defined as an object literal and is passed to a function in a Javascript script that calls the function. The script (and object) have this structure:

foo({
  "query": {
  "count": "2",
  "created": "2009-07-25T08:17:54Z",
  "lang": "en-US",
  },
  "results": {
   "result": [
    {
     "abstract": "<b>Pizza</b> Hut®. Order Online for Delivery or Carry-out. Fast &amp; Easy.",
     "title": "<b>Pizza</b> Hut"
    },
    {
     "abstract": "Official site of Domino's <b>Pizza</b> delivery chain, which offers thin crust, deep dish, and hand tossed <b>pizzas</b> with a variety of side items and beverages. Site <b>...</b>",
     "title": "Domino's <b>Pizza</b>"
    }
   ]
  }
 }
});

The object is passed to to a callback function named "foo":

function foo(o){
  var out = document.getElementById('container');
  out.innerHTML = o.query.count;
}

My Problem: I know how to print out the query count variable using the callback function above, but I don't know how to print out the the title of the first result in the results array.

How can I change the callback function to display the first result title? And also, is there a foreach statement, where I could print out all the titles from all the results?

Thanks!

UPDATE: JSBIN for this code is at: http://jsbin./ejiwa/edit

• javascript
• json
• yql

Share Improve this question Follow edited Dec 26, 2011 at 9:23 outis 77.5k2323 gold badges153153 silver badges226226 bronze badges asked Jul 25, 2009 at 20:25 chrischris 21.2k2929 gold badges7878 silver badges9090 bronze badges 3

• Question is wrong - you don't parse JSON, you work with pound JavaScript variable – zakovyrya Commented Jul 25, 2009 at 20:35
• 1 @chris: There's a typo in your code - you have an extra closing brace at the end of your call to foo(). – RichieHindle Commented Jul 25, 2009 at 20:35
• @Richie: Thanks I didn't notice that – chris Commented Jul 25, 2009 at 20:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Does the following work:

o.results.result[0].title

to get the first result title? And to iterate over all results:

for (var i=0; i<o.results.result.length; i++) {
    var result = o.results.result[i];
    alert(result.title);
}

EDIT: Are you sure you copied it right? Here's what I get in Rhino:

js> o = {
  "query": {
  "count": "2",
  "created": "2009-07-25T08:17:54Z",
  "lang": "en-US",
  },
  "results": {
   "result": [
    {
     "abstract": "<b>Pizza</b> Hutr. Order Online for Delivery or Carry-out. Fast &amp; Easy.",
     "title": "<b>Pizza</b> Hut"
    },
    {
     "abstract": "Official site of Domino's <b>Pizza</b> delivery chain, which offers thin crust, deep dish, and hand tossed <b>pizzas</b> with a variety of side items and beverages. Site <b>...</b>",
     "title": "Domino's <b>Pizza</b>"
    }
   ]
  }
 }

js> o.results.result[0].title
<b>Pizza</b> Hut

I am not sure what the o parameter is in your callback function. I usually assign the XMLHttpRequest or ActiveXObject to a global var req.

Then use a callback:

 function json_callback() {
    if (req.readyState == 4) {
            if (req.status == 200) {
                    jsonObj = eval("(" + req.responseText + ")");
                    var out = document.getElementById('container');
                    out.innerHTML = jsonObj.query.count;
            }
       }
 }

It should be noted that you should only use eval() if you fully trust the server and the data the server is sending the client. There are JSON parsers available which are actually faster than eval() and also more secure as they limit it to only JSON whereas eval() can parse and execute all of JavaScript which could be a security risk. It is expected in the next version of ECMAScript that there will be a standard JSON parser built in.

The actual object has a slightly different structure than you wrote. results is actually an element of query. So try this:

o.query.results.result[0].title

As you can see from the JSON, the object has a property called "results" which contains a property called "result" which is an array of objects.

To display the first of that, you simply do as you already did with count, but just follow the structure to the title instead.

o.query.results.result[0].title

To loop over each result, you can simply loop over the result property like an array, for example like this:

var results = o.query.results.result;
for(var i = 0; i < results.length; i++) {

}

JSON is simply JavaScript code. Think of the JSON snippet as a JavaScript object declaration and you should have no problems understanding it.