WP EasyJSON works with JSON data formatted from any source, including other WordPress sites and many public APIs. You can format the returned information using a simple shortcode and embedded template. The template is formatted using HTML and data placeholders are used to position information within the HTML.

Take, for example, the following JSON data:

[
  {
    "_id": "563656fb4648913d5cecc5e4",
    "index": 0,
    "guid": "c6901875-8cdb-4b6e-90d9-4e6926840621",
    "isActive": false,
    "balance": "$3,998.90",
    "picture": "http://placehold.it/128x128",
    "age": 22,
    "eyeColor": "green",
    "name": "Irwin Daniels",
    "gender": "male",
    "company": "CYTRAK",
    "email": "[email protected]",
    "phone": "+1 (979) 487-2725",
    "address": "887 Dean Street, Guthrie, Utah, 5077",
    "about": "Eiusmod minim officia reprehenderit ad irure est excepteur Lorem dolore fugiat nostrud. Mollit eu quis tempor aliqua sit adipisicing sunt commodo magna voluptate consequat. In tempor consectetur do in non incididunt sunt dolor commodo nulla nostrud aliquip officia duis. Quis cillum est mollit ad nisi amet ut sunt ex ex pariatur. Enim dolor consequat et consequat. Minim sint non proident ullamco sint cillum officia sunt cupidatat tempor est consectetur aliquip.\r\n",
    "registered": "2014-07-29T04:31:37 +07:00",
    "coordinates": {
      "latitude": -81.462608,
      "longitude": -127.224367
    },
    "tags": [
      "aliquip",
      "aute",
      "ut",
      "in",
      "deserunt",
      "enim",
      "sit"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Macdonald Moran"
      },
      {
        "id": 1,
        "name": "Araceli Orr"
      },
      {
        "id": 2,
        "name": "Cecelia Casey"
      }
    ],
    "greeting": "Hello, Irwin Daniels! You have 1 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "563656fbe30307755e129c19",
    "index": 1,
    "guid": "efb61fc4-b396-44f1-9222-92dbfdd206f2",
    "isActive": false,
    "balance": "$1,659.19",
    "picture": "http://placehold.it/32x32",
    "age": 36,
    "eyeColor": "brown",
    "name": "Erica Frazier",
    "gender": "female",
    "company": "DOGTOWN",
    "email": "[email protected]",
    "phone": "+1 (816) 408-3864",
    "address": "294 Onderdonk Avenue, Sexton, Northern Mariana Islands, 1603",
    "about": "Sint est amet id esse labore dolor culpa fugiat quis non sit ex id. Proident id elit nostrud voluptate. Aliqua labore irure eu nostrud culpa tempor reprehenderit ullamco consectetur adipisicing. Do cupidatat est dolor dolor sint tempor sit reprehenderit veniam incididunt.\r\n",
    "registered": "2014-08-30T01:40:17 +07:00",
    "coordinates": {
      "latitude": -30.417364,
      "longitude": -111.697982
    },
    "tags": [
      "sit",
      "exercitation",
      "dolore",
      "eiusmod",
      "amet",
      "dolor",
      "elit"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Schwartz Hancock"
      },
      {
        "id": 1,
        "name": "Perez Mcdaniel"
      },
      {
        "id": 2,
        "name": "Daugherty Roman"
      }
    ],
    "greeting": "Hello, Erica Frazier! You have 8 unread messages.",
    "favoriteFruit": "banana"
  }
]

Assuming the URL of the API where this information was collected was http://www.example.com/api/data-list, you could use this shortcode:

[json src="http://www.example.com/api/data-list" name="list"]
<h1>{name}</h1>
<p>You can place an image using a URL like: <img src="{picture}" alt="company" class="pull-right"/></p>
<h2>Friends</h2>
To display an array of information:
<ul>
{array:friends}
<li>{name}</li>
{/array:friends}
</ul>
<h2>Nested Elements</h2>
<p>You can also access nested elements without the use of an array and sub-template:</p>
<p>Geo: {coordinates.latitude}, {coordinates.longitude}
<hr/>
[/json]

The above template would display:

Irwin Daniels

You can place an image using a URL like:

Friends

• Macdonald Moran
• Araceli Orr
• Cecelia Casey

Nested Elements

You can also access nested elements without the use of an array and sub-template:

Geo: -81.462608, -127.224367

Erica Frazier

You can place an image using a URL like:

Friends

• Schwartz Hancock
• Perez Mcdaniel
• Daugherty Roman

Nested Elements

You can also access nested elements without the use of an array and sub-template:

Geo: -30.417364, -111.697982