如何調用外部json文件或文件夾中的文件

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/

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

<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>

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

這將使你：

用戶：達米爾P.
日期：1314168377
文字：AJD達vidimo hocu李znati ponoviti

See the Source answer

Answer 3

我複製你的代碼，我增加了我的測試JSON文件，你可以看到，標題來自JSON的第一個對象「名稱」屬性在這裏：

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

歡呼