Question

If I am to have this external json file:

{
"http://example.org/about" :
    {
        "http://purl.org/dc/elements/1.1/title" : [{"value" : "annas homepage" , "type" : "literal"}]
    }
}

and this external jquery script that fetches title of the book inside json file:

var a = 'http://example.org/about'
var b = 'http://purl.org/dc/elements/1.1/title'

$(document).ready(function() {
  $("#trigger").click(function(event) {
    $.getJSON('rdfjson.json', function(json) {
      $('#meta').html('Title: ' + json.a.b[0].value);
    });
  });
});

and this HTML code:

<p>Click on the button to fetch data from json structure:</p>
<div id="meta">
This text will be overwritten.
</div>
<input type="button" id="trigger" value="Load Data" />

Why wouldn’t it work? When I use normal strings inside json document and script, it works OK.

Also, I don’t understand how could I iterate through the whole json file if it is, for example, more complex or elements have long vectors containing data etc etc..

Thanks a lot!

Answer 1

Because you’re looking for an object member named a, rather than an object member whose name is the value stored in the variable “a”.

Instead of using “dot notation“, use “square bracket notation“

$('#meta').html('Title: ' + json[a][b][0].value);

For more information, see here: http://www.dev-archive.net/articles/js-dot-notation/

Edit:

If the JSON structure varies like so:

1. Version One:

   {
       "http://example.org/about" :
       {
           "http://purl.org/dc/elements/1.1/title" : [{"value" : "annas homepage" , "type" : "literal"}]
       }
   }
   

2. Version Two:

   {
       "http://somewhereelse.com/something" :
       {
           "http://anotherplace.org/dc/blah-blah-blah/title" : [{"value" : "annas homepage" , "type" : "literal"}]
       }
   }
   

e.g. there is always one object, which has one member which has one member

… and you need to target it:

$.getJSON('rdfjson.json', function(obj) {
  for (var x in obj) {
      if (obj.hasOwnProperty(x)) {
         var obj2 = obj[x];

         for (var x in obj2) {
            if (obj2.hasOwnProperty(x)) {
                $('#meta').html('Title: ' + obj2[x][0].value);
            }
         }
      }
  }
});

You can of course add conditionals within the for loops if you know a little bit more information about the path you need to traverse:

$.getJSON('rdfjson.json', function(obj) {
  for (var x in obj) {
      // if you know you're looking for a key that begins with "http://"
      if (obj.hasOwnProperty(x) && x.indexOf("http://") === 0) { 
         var obj2 = obj[x];

         for (var x in obj2) {
            // Check that the value is an array of at least length 1, and whose 1st value has the property "value".
            if (obj2.hasOwnProperty(x) && obj2[x] instanceof Array && obj2[x].length > 0 && obj2[x][0].value) { 
                $('#meta').html('Title: ' + obj2[x][0].value);
            }
         }
      }
  }
});