Question

I am looking to create an HTML version of a JSON, through JavaScript/jQuery, specifically the unofficial Google Dictionary JSON: http://googlesystem.blogspot.com/2009/12/on-googles-unofficial-dictionary-api.html.

Here is what I have so far:

<input type="text" id="query" /><button>search</button><br />
<div id="results">

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
    var query;
    var url;
    $('button').click(function() {
        query=$("#query").val();
        url= "http://www.google.com/dictionary/json?q="+query+"&sl=en&tl=en&restrict=pr%2Cde&client=te&callback=?";

        $.getJSON(url, function(json) {
            $.each(json.primaries.terms,function(i,key){
                $("#results").append('<span class="dct-tt">'+key.text);
            });
        })
    });
});
</script>

Clearly, it needs a lot of work. My main question is this: the array that gets outputted has multiple arrays, and I need to be able to parse through them. How do I do this, as the code above posts nothing for some reason. If anyone can help me to turn this into the nice looking results from google.com/dictionary it would be greatly appreciated.

Answer 1

For parsing this amounts of JSON to HTML I would really recommend you to take a look at jQuery Templates.