Как я могу получить доступ к моему файлу .json, используя отдельный JavaScript для HTML, используя .getjson - PullRequest
Новая
       7

Как я могу получить доступ к моему файлу .json, используя отдельный JavaScript для HTML, используя .getjson

0 голосов
/ 16 февраля 2011

день гуд ... я пытаюсь написать программу на javascript, которая использует .json. я уже написал один, который, когда я запускаю программу, она будет динамически создавать вкладку, используя jquery, из моих данных json. это уже запущенная программа, но мои данные JSON находятся в моем коде JavaScript. Что меня действительно смущает, так это то, как это сделать, используя отдельный файл .json, .js и .html.

вот мой работающий код javascript с моим json 

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));    
       });

наш инструктор хотел, чтобы мы использовали jQuery.getjson () только для получения нашего файла .json. он сказал, что это то, что мы собираемся использовать, если мы скоро подключимся к серверу. я изучил образец из http://api.jquery.com/jQuery.getJSON/ и да, он может отображать

  • Одиночное ощущение
  • бусинки глазки
  • Маленькие птичьи поля возле моего порога

но проблема в том, что я не знаю, как это сделать, если я буду использовать 

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

и многое другое в массивах объектов или массивах объектов ....

Я новичок в использовании файла JSON с JavaScript ... так что мне действительно нужна помощь. большое спасибо.

Ответы [ 3 ]

0 голосов
/ 16 февраля 2011

Я считаю, что следующее должно работать, хотя я сам не пробовал.Вы в основном вызываете getJSON и передаете его в свой файл json на своем сервере.Затем в возвращаемой функции вы анализируете данные, используя метод parseJSON, который будет анализировать данные в объект, который может быть использован вашим методом CreateTab.

var myJsonObj;

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

0 голосов
/ 13 апреля 2011

проблема решена. вот мой код JavaScript: 

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

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

вот мой файл 'tabfromjson.json' 

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

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

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

если вы собираетесь запустить этот код, он отобразит три вкладки с заголовком и описанием вкладки в tabfromjson.json. Вы можете добавить вкладку, просто добавив данные в файл .json. надеюсь, это поможет кому-то, кто новичок в json, и тем, кто хочет об этом знать.

0 голосов
/ 16 февраля 2011

Сохраните файл json на сервере и укажите URL-адрес файла, используя getJSON:)

...