~smagoun/whoopsie/whoopsie-lp1017637

// [{"name":"Bobby","birthdate":"1964-02-28T08:00:00Z"},{"name":"Sally","birthdate":"1983-09-30T07:00:00Z"},{"name":"Tommy","birthdate":"1990-03-11T08:00:00Z"},{"name":"Chaz","birthdate":"1975-05-23T07:00:00Z"}]

312

313

});</pre>

314

315

316

<h4 id="format">Formatting JSON output</h4>

317

318

<p>

319

To create readable JSON, pass a string or number as the third parameter to

320

<code>stringify</code>. Object and Array members will be separated with

321

newlines and indented. If a string is supplied, that string will be used

322

for the indentation. If a number is passed, that number of spaces will be

323

used.

324

</p>

325

326

<pre class="code prettyprint">YUI().use('json-stringify', function (Y) {

327

328

var fam = {

329

family: "Franklin",

330

children: [ "Bob", "Emily", "Sam" ]

331

};

332

333

// format serialization with four spaces

334

var jsonStr = Y.JSON.stringify(fam,null,4);

335

336

alert(jsonStr);

337

338

{

339

"family": "Franklin",

340

"children": [

341

"Bob",

342

"Emily",

343

"Sam"

344

]

345

}

346

347

348

});</pre>

349

350

351

<h3 id="errors">Catching JSON errors</h3>

352

353

<p>

354

ECMA 5 states that <code>parse</code> should throw an error when an invalid

355

JSON string is input. It also states that <code>stringify</code> should

356

throw an error when an object with cyclical references is input.

357

</p>

358

359

<p>

360

For this reason, it is recommended that both <code>parse</code> and

361

<code>stringify</code> be called from within

362

<code>try</code>/<code>catch</code> blocks.

363

</p>

364

365

<pre class="code prettyprint">try {

366

// BOOM

367

Y.JSON.parse("{'this string': is, not_valid: ['J','S','O','N'] }");

368

}

369

catch (e) {

370

alert("A string may eval to the same object, but might not be valid JSON");

371

}

372

373

// This is safe to stringify

374

var myData = {

375

troop : [

376

{ name: "Ashley", age: 12 },

377

{ name: "Abby", age:9 }

378

]

379

};

380

381

// Create a cyclical reference

382

myData.troop[0]["NEWKEY"] = myData;

383

384

try {

385

// BOOM

386

jsonStr = Y.JSON.stringify(myData);

387

} catch (e) {

388

alert("Cyclical references can sneak in. Remember to wrap stringify.");

389

}</pre>

390

391

392

<h3 id="native">Notes about current native JSON support</h3>

393

394

<p>

395

Native JSON support in JavaScript is defined in the ECMAScript 5

396

specification, which was finalized in September 2009. However, most of the

397

major browser vendors had already implemented this feature in recent

398

versions of their JavaScript engines while the spec was still in draft. As

399

a result of the timing and the fact that native JSON is a new feature,

400

there are gotchas involved in leveraging the disparate native

401

behaviors.

402

</p>

403

404

<p>

405

In general, it is preferable to use the native behavior for

406

<code>JSON.parse</code> as it is much faster and safer than any JavaScript

407

implementation. There are also very few known critical issues with

408

supporting browsers.

409

</p>

410

411

412

<p>

413

Stringify has more pitfalls and inconsistencies, but they may not affect

414

your use cases. As with <code>parse</code>, the native implementation of

415

<code>stringify</code> is faster, but only marginally so with reasonably

416

sized input. In most cases, choosing the JavaScript implementation will

417

not affect performance and may be preferable for its cross browser

418

consistency.

419

</p>

420

421

422

<p>

423

As noted above, the JSON module will leverage native behavior in

424

implementing browsers by default. However, you can choose to opt out of

425

leveraging native <code>parse</code> or <code>stringify</code> by setting

426

the <code>Y.JSON.useNativeParse</code> and

427

<code>Y.JSON.useNativeStringify</code> static properties.

428

</p>

429

430

431

<pre class="code prettyprint">YUI().use('json', function (Y) {

432

433

// Always use the JavaScript implementation for parsing

434

Y.JSON.useNativeParse = false;

435

436

// Always use the JavaScript implementation for stringifying

437

Y.JSON.useNativeStringify = false;

438

439

//...

440

});</pre>

441

442

</div>

443

</div>

444

</div>

445

446

447

448

449

450

451

<h2 class="no-toc">Table of Contents</h2>

452

</div>

453

454

455

456

<li>

457

<a href="#getting-started">Getting Started</a>

458

</li>

459

<li>

460

<a href="#using">Using the JSON Utility</a>

461

462

<li>

463

<a href="#modules">JSON module overview</a>

464

</li>

465

<li>

466

<a href="#parse">Parsing JSON strings into native JavaScript values</a>

467

468

<li>

469

<a href="#reviver">Using the "reviver" parameter</a>

470

</li>

471

<li>

472

<a href="#avoid_eval">A word of caution against using <code>eval</code></a>

473

</li>

474

</ul>

475

</li>

476

<li>

477

<a href="#stringify">Creating JSON strings from JavaScript objects</a>

478

479

<li>

480

<a href="#whitelist">Using a whitelist</a>

481

</li>

482

<li>

483

<a href="#replacer">Using a custom "replacer" function</a>

484

</li>

485

<li>

486

<a href="#format">Formatting JSON output</a>

487

</li>

488

</ul>

489

</li>

490

<li>

491

<a href="#errors">Catching JSON errors</a>

492

</li>

493

<li>

494

<a href="#native">Notes about current native JSON support</a>

495

</li>

496

</ul>

497

</li>

498

</ul>

499

</div>

500

</div>

501

502

503

504

505

506

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

507

</div>

508

509

510

511

512

513

514

515

</li>

516

517

518

519

520

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

521

</li>

522

523

524

525

526

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

527

</li>

528

529

530

531

532

533

534

</ul>

535

</div>

536

</div>

537

538

539

540

541

542

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

543

</div>

544

545

546

547

548

549

550

551

552

553

554

555

556

557

</li>

558

559

560

561

562

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

563

</li>

564

565

566

</ul>

567

</div>

568

</div>

569

570

</div>

571

</div>

572

</div>

573

</div>

574

575

576

577

578

</body>

579

</html>

Older »