Question

如何从文件夹中为此代码调用外部json文件或json文件???我的代码Jsfiddle

http://jsfiddle.net/binoymat/cve8gyuy/

我试过

$.getJSON( "{% url 'sampletest.json' %}", function(data){ 

//code inside

});

但无法提取数据。

Answer 1

$.getJSON获取解析的JSON对象。请参阅以下示例：

演示：http://jsfiddle.net/kishoresahas/cve8gyuy/1/

＆＃13;

$.getJSON("https://api.myjson.com/bins/4ls7p", function(data) {
  //code inside
  var items = data;
  var checkIds = [];
  $.each(items, function(k, v) {
    if ($.inArray(v.id, checkIds) == -1) {
      $("#category").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.chains + '</option>');
      checkIds.push(v.id);
    }
  });

  $("#category").on('change', function() {
    var dept_number = parseInt($(this).val());
    var price = $(this).find(':selected').data('price');
    var tochange = false;
    var total = 0;
    $.each(items, function(k, v) {
      if (v.id == dept_number) {
        if (tochange == true) {
          $("#category1").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.site + '</option>');
          $("#category2").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
          $("#category3").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.date + '</option>');
        } else {
          $("#category1").html('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.site + '</option>');
          $("#category2").html('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
          $("#category3").html('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.date + '</option>');
          tochange = true;
        }
        total += v.visitors;
      }
    });
    $('#dept-input').val(dept_number);
    $('#price-input').val(total);
  }).change();

  $("select[id^='category']:not(#category)").on('change', function() {
    var dept_number = parseInt($(this).val());
    var price = $(this).find(':selected').data('price');
    $('#dept-input').val(dept_number);
    $('#price-input').val(price);
  });
});

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category"></select>
<select id="category1"></select>
<select id="category2"></select>
<select id="category3"></select>
<br>
<br>
<label>Dept. num:</label>
<input type="text" id="dept-input"></input>
<br>
<br>
<label>Price:</label>
<input type="text" id="price-input"></input>

＆＃13;

Answer 2

您需要迭代组和项目。 $.each()将集合作为第一个参数，data.response.venue.tips.groups.items.text尝试指向字符串。组和项都是数组。

详细版本：

$.getJSON(url, function (data) {

// Iterate the groups first.
$.each(data.response.venue.tips.groups, function (index, value) {

    // Get the items
    var items = this.items; // Here 'this' points to a 'group' in 'groups'

    // Iterate through items.
    $.each(items, function () {
        console.log(this.text); // Here 'this' points to an 'item' in 'items'
    });
});
});

或更简单：

$.getJSON(url, function (data) {
$.each(data.response.venue.tips.groups, function (index, value) {
    $.each(this.items, function () {
        console.log(this.text);
    });
});
});

在您指定的JSON中，最后一个是：

$.getJSON(url, function (data) {
// Get the 'items' from the first group.
var items = data.response.venue.tips.groups[0].items;

// Find the last index and the last item.
var lastIndex = items.length - 1;
var lastItem = items[lastIndex];

console.log("User: " + lastItem.user.firstName + " " + lastItem.user.lastName);
console.log("Date: " + lastItem.createdAt);
console.log("Text: " + lastItem.text);
});

这会给你：

用户：Damir P.
  日期：1314168377
  文字：ajd da vidimo hocu li znati ponoviti

See the Source answer

Answer 3

我复制了你的代码，我添加了我的测试json文件，你可以看到这个标题来自json的第一个对象'name'属性：

http://jsfiddle.net/mkdizajn/9d2L1Lrt/1/

希望能帮到你，我只使用了更多的ajax jquery fn。

$.ajax({
    url: "http://mkdizajn.github.io/public/test.json",
    success: function(data){
        $( 'h1' ).text( data[0].name )
    },
});

欢呼声

如何从文件夹中调用外部json文件或文件

3 个答案: