~ubuntu-branches/ubuntu/precise/whoopsie-daisy/precise-proposed

A natural fit for the JSON module is to work with IO to parse JSON messages received via XMLHttpRequest (XHR). In this example, we'll request JSON data from the server using the <a href="http://yuilibrary.com/yui/docs/api/classes/IO.html#method_io"><code>Y.io()</code></a> method and parse the resulting JSON string data.

</p>

</div>

<p>Click the <em>Get Messages</em> button to send the request to the server; the response will be displayed below the button.</p>

<p><button>Get Messages</button></p>

</div>

// Create business logic in a YUI sandbox using the 'io' and 'json' modules

YUI().use("node", "io", "dump", "json-parse", function (Y) {

// capture the node that we'll display the messages in

var target = Y.one('#demo-messages');

// Create the io callback/configuration

var callback = {

timeout : 3000,

on : {

success : function (x,o) {

Y.log("RAW JSON DATA: " + o.responseText);

var messages = [],

html = '', i, l;

// Process the JSON data returned from the server

try {

messages = Y.JSON.parse(o.responseText);

}

catch (e) {

alert("JSON Parse failed!");

return;

}

Y.log("PARSED DATA: " + Y.Lang.dump(messages));

// The returned data was parsed into an array of objects.

// Add a P element for each received message

for (i=0, l=messages.length; i < l; ++i) {

html += '<p>' + messages[i].animal + ' says "' +

messages[i].message + '"</p>';

}

// Use the Node API to apply the new innerHTML to the target

target.setContent(html);

failure : function (x,o) {

alert("Async call failed!");

}

};

// Attach a click event listener to the button #demo_btn to send the request

Y.one('#demo button').on('click',function (e) {

// Make the call to the server for JSON data

Y.io("../assets/json/json-connect-response.json", callback);

});

</script>

</div>

<h2>Use <code>Y.JSON.parse</code> in the <code>success</code> handler</h2>

<p>

Pass the XHR <code>responseText</code> to <code>Y.JSON.parse()</code> and capture the return value. Note that the <code>parse()</code> method can throw a <code>SyntaxError</code> exception, so be sure to wrap the call in a <code>try/catch</code> block.

</p>

100

<pre class="code prettyprint lang-javascript">Y.io('../assets/json/json-connect-response.json', {

101

on : {

102

success : function (tx, r) {

103

var parsedResponse;

104

105

// protected against malformed JSON response

106

try {

107

parsedResponse = Y.JSON.parse(r.responseText);

108

}

109

catch (e) {

110

alert("JSON Parse failed!");

111

return;

112

}

113

}

114

}

115

});</pre>

116

117

118

<p>

119

The <code>parse()</code> method returns the native JavaScript object representation of the string data returned from the <a href="http://yuilibrary.com/yui/docs/api/classes/IO.html#method_io"><code>Y.io()</code></a> call. In this case, the data is an array of object literals in this form:

120

</p>

121

122

<pre class="code prettyprint lang-json">[

123

{ "animal" : "Cat", "message" : "Meow" },

124

{ "animal" : "Dog", "message" : "Woof" },

125

{ "animal" : "Cow", "message" : "Moo" },

126

{ "animal" : "Duck", "message" : "Quack" },

127

{ "animal" : "Lion", "message" : "Roar" }

128

]</pre>

129

130

131

<p>

132

In the <code>success</code> handler we'll simply loop through this array and outputting its contents to the DOM.

133

</p>

134

135

<h2>Complete Example Source</h2>

136

137

<p>Click the <em>Get Messages</em> button to send the request to the server; the response will be displayed below the button.</p>

138

<p><button>Get Messages</button></p>

139

140

</div>

141

142

143

// Create business logic in a YUI sandbox using the 'io' and 'json' modules

144

YUI().use("node", "io", "dump", "json-parse", function (Y) {

145

146

// capture the node that we'll display the messages in

147

var target = Y.one('#demo-messages');

148

149

// Create the io callback/configuration

150

var callback = {

151

152

timeout : 3000,

153

154

on : {

155

success : function (x,o) {

156

Y.log("RAW JSON DATA: " + o.responseText);

157

158

var messages = [],

159

html = '', i, l;

160

161

// Process the JSON data returned from the server

162

try {

163

messages = Y.JSON.parse(o.responseText);

164

}

165

catch (e) {

166

alert("JSON Parse failed!");

167

return;

168

}

169

170

Y.log("PARSED DATA: " + Y.Lang.dump(messages));

171

172

// The returned data was parsed into an array of objects.

173

// Add a P element for each received message

174

for (i=0, l=messages.length; i < l; ++i) {

175

html += '<p>' + messages[i].animal + ' says "' +

176

messages[i].message + '"</p>';

177

}

178

179

// Use the Node API to apply the new innerHTML to the target

180

target.setContent(html);

181

182

183

failure : function (x,o) {

184

alert("Async call failed!");

185

}

186

187

}

188

};

189

190

// Attach a click event listener to the button #demo_btn to send the request

191

Y.one('#demo button').on('click',function (e) {

192

// Make the call to the server for JSON data

193

Y.io("../assets/json/json-connect-response.json", callback);

194

});

195

196

});

197

</script></pre>

198

199

</div>

200

</div>

201

</div>

202

203

204

205

206

207

208

209

210

<h2 class="no-toc">Examples</h2>

211

</div>

212

213

214

215

216

217

218

219

</li>

220

221

222

223

224

<a href="json-freeze-thaw.html">Rebuilding Class Instances from JSON Data</a>

225

</li>

226

227

228

229

230

<a href="json-convert-values.html">Adding New Object Members During Parsing</a>

231

</li>

232

233

234

235

236

237

238

</ul>

239

</div>

240

</div>

241

242

243

244

245

246

<h2 class="no-toc">Examples That Use This Component</h2>

247

</div>

248

249

250

251

252

253

254

255

256

257

258

259

260

261

</li>

262

263

264

265

266

<a href="../dd/portal-drag.html">Portal Style Example</a>

267

</li>

268

269

270

</ul>

271

</div>

272

</div>

273

274

</div>

275

</div>

276

</div>

277

</div>

278

279

280

281

282

</body>

283

</html>

Older »