Yahoo! Pipes

Using your Yahoo! Pipes

You've learned how to build Yahoo! Pipes—so now what? How do you incorporate Yahoo! Pipes feeds into your own web pages?

You've got three choices: write a web-server-based program, use Ajax techniques and a web proxy, or use JavaScript and JSON.

The first two options require that you have access to a web server. But the last option, JavaScript and JSON, can be implemented on any static web page—no web server access is needed. Let's see how this method works.

What Is JSON?

When using the Yahoo! Pipes "Run this Pipe" option, you may have noticed the Tools options at the bottom of the Pipe Preview page (see Figure 17).

Figure 17. 

Since most news feeds are published as RSS data, the first option is obvious. We've been manipulating RSS all along, so it makes sense that we'd get RSS as output.

But what's this "Get as JSON" option? JSON is JavaScript Object Notation. It's the way JavaScript defines its data structures.

In the following JavaScript example, a JSON data structure is assigned to the variable mydata.

var mydata = {
    "lastName": "Pruett",
    "firstName": "Mark",
    "address": {
        "street": "123 Main Street",
        "city": "Anytown",
        "state": "VA",
        "zip": 23000
    }
}

We can access individual fields easily. Here, the full name is inserted into an HTML span tag (the span tag has an ID attribute of "fullname"):

var span = document.getElementById ("fullname"); span.innerHTML = mydata.firstName ...