Question

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"},
   {"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.

Answer 1

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.