Show external JSON data in Drupal Views

Show external JSON data in Drupal Views

A common scenario: You have some data outside your Drupal site and you would like to use it on a page on your site. A solution is to use Feeds module to import the data into your site’s database. But what if you don't want to fill your database with that data? What if all you want is to show it?

If the data you want follows a JSON structure, Frontkom has built a handy module that can easily help you: Views Query JSON.

This module basically fetches JSON data from an URL and parses as a flat data structure to be used on Views displays.

So, how to use it? Install the module and enable it.

Create a new view and choose Json option at Show select box:

Then fill the rest of the fields as you normally do.

Now you need to define from where the data is coming. Click on Advanced and then Query settings: Settings.

Fill the Json File text field with the source URL:

You should fill Row Apath field with the data key you want to retrieve. For example, the JSON data we’re working on has the following structure:

{
  'persons':[
    {
      'firstName': 'Geir',
      'lastName': 'Gulland',
      'position': 'CEO & partner',
      'imageUrl': 'http://www.frontkom.no/img/profiles/Geir.jpg',
      'contact':{
        'facebook': 'https://www.facebook.com/geir.gulland',
        'linkedin': 'http://www.linkedin.com/profile/view?id=6151058'
      }
    },
...
]}

So you should use persons as the row apath.

Be aware that for a structure like this:

[
  {
    ‘firstName’: ‘Marco’,
    ‘lastName’: ‘Fernandes’,
    ‘contact’: {
      ‘email’: ‘marco@example.com’,
      ‘phone’: ‘123456789’
    },
  ...
]

The find method used on row apath won’t work because no key is given for the collection. This issue already being addressed by the maintainers of the module.

Now, let’s get some values into our view table. By default, one empty field is added to your view fields so just click on that one:

Give a name to the label and on Key Chooser field, well, choose the key:

If you want to render an image from an url just enable the Rewrite results when editing the field:

Apply, save et voilá! External data on your site, always up-to-date!

As you can see on the example data structure we have a node “contact” that contains email and phone attributes. How do you fetch those fields? Simple, on Key Chooser field just fill contact/email or contact/phone. And you can do that on any number of levels, e.g. contact/email/work, contact/phone/work/primary.

And that’s all to it. Very simple stuff but definitely very handy.