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

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 += '<d开发者_运维百科iv 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"},
   {"title": "tab 2", "desc":"This is tab 2"}
  ];

$('#tabs').append(CreateTab(json1, "#tabs", true));    
       });

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. i studied the sample from http://api.jquery.com/jQuery.getJSON/ 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.

Store your json file on server and provide the url to the file using getJSON :)

I believe the following should work although i haven't tried it myself. You basically call getJSON and pass it the url to your json file on your server. Then in the return function you parse the data use the parseJSON method which will parse the data into an object which can be used by your CreateTab method.

var myJsonObj;

$.getJSON("http://example.com/myjsonfile.json", function(data) { myJsonObj = jQuery.parseJSON(data); $('#tabs').append(CreateTab(json1, "#tabs", true)); });

problem solved. here's my javascript code:

function CreateTab(o) {
...//the code is same as the question
}

$(document).ready( function() {  
$.getJSON('tabfromjson.json',
  function(data) {        
     $('#tabs').append(CreateTab(data));
     $('#tabs').tabs();
  });
});

here's my 'tabfromjson.json' file

[
  { 
    "title": "tab 1",  
    "desc":"This is tab 1"
  },

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

  { 
    "title": "tab 3",  
    "desc":"Thistab 3"
  }
]

if you are going to run this code, it will display three tabs with tab title and description in tabfromjson.json. you can add tab by just adding the data in the .json file. hope this helps for someone who is fresh and new to json, and to someone who want to know about this.