Trouble to fetch data from JSON - json

Question

Am working in jQuery Mobile and PhoneGap.
Currently I have a Trouble to fetch data from JSON.
My JSON format is ;
{
payment: {
1: "Visa",
2: "American Express",
3: "Mastercard/Eurocard",
4: "Visa – Verified by Visa",
5: "Mastercard/Eurocard – Securecode"
}
}
And Its XML will looks like this ;
<payment>
<1>Visa</1>
<2>American Express</2>
<3>Mastercard/Eurocard</3>
<4>Visa – Verified by Visa</4>
<5>Mastercard/Eurocard – Securecode</5>
</payment>
I want to fetch the details in to a selectbox.
and My Code is ;
function loadpayment() {
$.ajax({
url: 'https://www.sample.net/json/jsn_payments.php?json=1&rcg_mobile=2',
data: '',
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
crossDomain: true,
cache: false,
async: false,
success: function (data, textStatus, jqXHR) {
var count = data.payment.length;
var card_type_ = $('#card_type_');
var card_type = '';
card_type_.empty();
card_type += '<option selected="selected" value="">' + BookCar2_Cardtype_label + '</option>';
for (i = 1; i < count; i++) {
card_type += '<option value=' + data.payment.[i] + '>' + data.payment.[i] + '</option>';
alert(data.payment.payment[i]);
alert(0);
}
card_type_.append(card_type);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + "-" + errorThrown);
}
});
}
But Its not working !!! I thinks its a simple mistake but i lost lot of time to solve this issue.. so please help me :(

Answer 1

when you use the json as in the question you cannot access them as property beacuse it is a number remember you cannot define number variable. or cannot access it like array as it is an object.
but it s and object with key so you should be able to acces them like below
obj["1"], obj["2"] etc
in your case try data.payment[i] or just in case data.payment[i.toString()]
also just notices you are using for loop as it s an array but it not so data.payment.length returns undefined. you should use foreach loop for payment, try below code.
for (var key in data.payment)
{
card_type += '<option value=' + data.payment[key] + '>' + data.payment[key] + '</option>';
alert(data.payment[key]);
alert(0);
}

Answer 2

Instead of using a for loop, use $.each()
$.each(data.payment,function(key,option)
{
card_type_.append('<option value="'+key+'">'+option+'</option>');
});
Other than that, I would say data.payment.[i] should be data.payment[i]
*and as cfs pointed out the missing quotes for value=""

Answer 3

I'm not exactly what error you're seeing, but I can see that the HTML you are creating is not valid: you're missing quotes around the value attribute in your option elements.
EDIT You are also accessing your arrays incorrectly. You don't need a dot between the data.payment and the [i]
Try this instead:
card_type += '<option value="' + data.payment[i] + '">' + data.payment[i] + '</option>';

Answer 4

I have put your JSON code inside a JSONLinter and it seems your JSON code is invalid.
You should use this code instead:
{
"payment": [
"Visa",
"American Express",
"Mastercard/Eurocard",
"Visa – Verified by Visa",
"Mastercard/Eurocard – Securecode"
]
}
You can also use $.each instead of the "for".

Answer 5

Finally I got the Solution :-)
And My code is :
function loadpayment(){
$.ajax({
url: 'https://www.sample.net/json/jsn_payments.php?json=1&rcg_mobile=2',
data:'',
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
crossDomain:true,
cache: false,
async:false,
success: function(data, textStatus, jqXHR){
var count = data.payment.length;
//alert(count);
var card_type_=$('#card_type_');
var card_type = '';
card_type_.empty();
card_type +='<option selected="selected" value="">'+BookCar2_Cardtype_label+'</option>';
for (var key in data.payment)
{
card_type += '<option value=' + data.payment[key] + '>' + data.payment[key] + '</option>';
}
card_type_.append(card_type);
},
error: function(XMLHttpRequest, textStatus, errorThrown){alert(textStatus +"-"+ errorThrown);}
});
}
Thank you.. # Onur TOPAL!!