converting json data to javascript array

Question

 $.ajax({
 type: "POST",
 url: "Default2.aspx/myMethod",
 data: '{}',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function OnSuccess(response) {
 var str = response.d;
 var jsonObj = JSON.parse(str);
 for(i=0;i<jsonObj.length;i++)
 {
 jsonObj[i]="{"+jsonObj[i]+"}"
 }
 jsonObj = "[" + jsonObj + "]";
 },
 failure: function (response) {
 alert(response.d);
 }
 });

What I recevied in jsonObj is the javascript array of images path. I pass this array to a image slider to show images but it shows undefined i.e not displayed the images the result of jsonObj is

[{'src: ../img/kota-image/11.jpg'},{'src: ../img/kota-image/12.jpg'},{'src: ../img/kota-image/13.jpg'},{'src: ../img/kota-image/14.jpg'},{'src: ../img/kota-image/15.jpg'},{'src: ../img/kota-image/197.jpg'},{'src: ../img/kota-image/2706.jpg'},{'src: ../img/kota-image/9.jpg'},{'src: ../img/kota-image/DSC_0825.JPG'},{'src: ../img/kota-image/kota.jpg'}]

my image slider is

jR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({
 width: $(window).width(), /* largest allowed width */
 height: 670, /* largest allowed height */
 slides: jsonObj/* array of images source */,
 "animationDuration": 1500,
 "animationInterval": 2500,
 });

• Nina Scholz: {'src: ../img/kota-image/12.jpg'} is not valid javascript.
• Areca: Why do not you use jsonObj directly after parsing it?
• Nina Scholz: please add the format of the receiving data and the structure of the target data.
• Barmar: You're making this much more complicated than it needs to be. Just create an array of objects, not strings. Use JSON.stringify() to turn it into JSON if you need.
• user6180198: Yes {'src: ../img/kota-image/12.jpg'} is not valid javascript.So I changed it to {'src':' ../img/kota-image/12.jpg'} but no luck

Answer 1

I think, you don't need this loop:

 for(i=0;i<jsonObj.length;i++)
 {
 jsonObj[i]="{"+jsonObj[i]+"}"
 }
 jsonObj = "[" + jsonObj + "]";

var jsonObj = JSON.parse(str); is already an array.

Try the code below:

$.ajax({
 type: "POST",
 url: "Default2.aspx/myMethod",
 data: '{}',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function OnSuccess(response) {
 var str = response.d;
 var jsonObj = JSON.parse(str); 
 console.log( jsonObj );
 },
 failure: function (response) {
 alert(response.d);
 }
});

If you wanted to convert the object to pure array, you can do it this way.

 success: function OnSuccess(response) {
 var str = response.d;
 var data = JSON.parse(str); 
 var jsonObj = $.map(data, function(value, index) {
 return [value];
 });
 console.log(jsonObj );
 }

• Kaddath: more than that, not only he doesn't need, but that will for sure break the way the object can be used, as it results in a string with something like "[[object Object],[object Object]]"
• user6180198: Actually what I want to ask you the path I received is not display the images in image slider.It shows undefined.Although when I display the image path is correct.I just want to load the images dynamically from the folder using ajax and json.

Answer 2

YOu have to use like this

[{'src': '../img/kota-image/11.jpg'},{'src': '../img/kota-image/12.jpg'},{'src': '../img/kota-image/13.jpg'},{'src': '../img/kota-image/14.jpg'},{'src': '../img/kota-image/15.jpg'},{'src': '../img/kota-image/197.jpg'},{'src': '../img/kota-image/2706.jpg'},{'src': '../img/kota-image/9.jpg'},{'src': '../img/kota-image/DSC_0825.JPG'},{'src': '../img/kota-image/kota.jpg'}]

Answer 3

Your json seems to be improperly formatted. Change it from

[{'src: ../img/kota-image/11.jpg'},{'src: ../img/kota-image/12.jpg'}]

to

[{'src': '../img/kota-image/11.jpg'},{'src':
 '../img/kota-image/12.jpg'}]