How to call an external json file or a json file from a folder for this code??? Jsfiddle for my code http://jsfiddle.net/binoymat/cve8gyuy/
I tried
$.getJSON( "{% url 'sampletest.json' %}", function(data){
//code inside
});
but wasn't able to pull the data.
$.getJSON gets a parsed JSON object.
See the below sample:
Demo : 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>
You need to iterate both the groups and the items. $.each() takes a collection as first parameter and data.response.venue.tips.groups.items.text tries to point to a string. Both groups and items are arrays.
Verbose version:
$.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'
});
});
});
Or more simply:
$.getJSON(url, function (data) {
$.each(data.response.venue.tips.groups, function (index, value) {
$.each(this.items, function () {
console.log(this.text);
});
});
});
In the JSON you specified, the last one would be:
$.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);
});
This would give you:
User: Damir P.
Date: 1314168377
Text: ajd da vidimo hocu li znati ponoviti
I copied your code and I added my test json file and you can see that title comes from json's first object 'name' property here:
http://jsfiddle.net/mkdizajn/9d2L1Lrt/1/
Hope that helps you,, I only used more general ajax jquery fn.
$.ajax({
url: "http://mkdizajn.github.io/public/test.json",
success: function(data){
$( 'h1' ).text( data[0].name )
},
});
cheers
