how can i access my .json file using separate javascript to html

[jay patangan]

hi, gud day... i'm trying to write a program in javascript that uses .json. i already wrote one that is when i run the program, it will create a tab dynamically, using jquery, from my json data. it's already a running program but my json data is in my javascript code. what im really confused about is how to do it using a separate .json file, .js and .html.

here is my running javascript code with my json in it

function CreateTab(o) {
  var str = '<ul>';
  for (var i = 0; i < o.length; i++) {        
    str += '<li><a href="#tab' + i + '">' + o[i].title +   '</a></li>';        
    }
 
    str += '</ul>';
    for (var i = 0; i < o.length; i++) {
    str += '<div id="tab' + i + '">' + o[i].desc + '</div>';
    }
  return str;
}
 
$(document).ready(function() {
  var json1 = [    
    {"title": "tab 1", "desc":"This is tab 1"},
    {"title": "tab 2", "desc":"This is tab 2"}
  ];
 
$('#tabs').append(CreateTab(json1, "#tabs", true));    
        });

[acoder]

Since JSON is a subset of JavaScript, you could include it as a JavaScript file:

<script  type="text/javascript" src="path/to/data.json"></script>

[jay patangan]

i've tried that one but our instructor wanted us to use jQuery.getjson() only to get our .json file. he said that is what we are going to use if we are to connect soon to the server. thank you so much for the reply

[acoder]

Oh right. In that case, see the documentation (and the listed examples on that page).

[jay patangan]

i already tried using that one and yes, it can display the

* Singular sensation
* Beady little eyes
* Little birds pitch by my doorstep

but the problem is, i don't how to do it if i will use

{"title": "tab 1", "desc":"This is tab 1"},
{"title": "tab 2", "desc":"This is tab 2"},
{"title": "tab 3", "desc":"This is tab 3"},

and much more in arrays of objects or object arrays....

i am new in using json file with javascript... so i really need help. thanks a lot.

[acoder]

Once you have the data, it'd be the same as you're using it now, e.g.

for (var i = 0; i < o.length; i++) {
     str += '<li><a href="#tab' + i + '">' + o[i].title +   '</a></li>';
}