4

hi actually i read many topic about array and jquery and they all show example using jquery inside the hmtl script tag but what i try to learn is how to read an array sent by php throught ajax inside a js file

here is my php example

$record = array('jazz','rock', 'punk', 'soft', 'metal');
echo json_encode($record);

then here is my ajax

$.ajax({
    url: "system/music_list.php",
    dataType: 'json',
    cache: false,
    success: function(response){
        // here i want to read the array and make a loop for each element 
    },
});

thanks if you can help me

3
  • 2
    Then what is the issue ? Have you tried for..loop ?
    – Rayon
    Commented Feb 15, 2016 at 5:55
  • 1
    $.each(response, function(){ ... }) Commented Feb 15, 2016 at 6:02
  • the $.each did the job :D im pretty new in jquery and i try to learn my biggest problem is to find right topic honestly i am not english and searching in english is getting hard when it comes about coding but im happy i learned something today ...
    – Mireille28
    Commented Feb 15, 2016 at 6:42

7 Answers 7

5

try basic for loop with count using length This .. this should help surely.

 function ajax_test()
 {
    $.ajax({
        url: "system/music_list.php",
        dataType: 'json',
        cache: false,
        success: function(response)
        {
             for (var i = 0; i < response.length; i++)
             {
                 alert(response[i]);
             }
        }
    });
 }
0
2

Try a for loop to loop the records

$.ajax({
    url: "system/music_list.php",
    dataType: 'json',
    cache: false,
    success: function(response){
        var record;
        for(record in response)
        {
            console.log(response[record]); 

        });
    },
});
2

Please use below code :

$(response).each(function(key,value){
    console.log(value);
});

Here each loop of response array and value get ('jazz',rock,...etc).

5
  • yes response is array so i can use in to each for traverse values. Commented Feb 15, 2016 at 5:59
  • 1
    $.each(response, function(){ ... }) Kindly provide the reference.. value will return indexes in your example..
    – Rayon
    Commented Feb 15, 2016 at 6:00
  • 1
    .each() iterates over jquery object whereas $.each iterates over objects and array...
    – Rayon
    Commented Feb 15, 2016 at 6:08
  • I never said it will not work but the .each is not the way to go. It i there to iterate the jQuery objects not the array elements...
    – Rayon
    Commented Feb 15, 2016 at 6:19
  • Rayon Dabre please can you explain me when you say .each is not the way to go what do you mean ?
    – Mireille28
    Commented Feb 15, 2016 at 7:23
2

try see this, clear solution for your question

https://stackoverflow.com/questions/20772417/how-to-loop-through-json-array-in-jquery

2

$.each : A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties. Reference documentation

$.ajax({
url: "system/music_list.php",
dataType: 'json',
cache: false,
success: function(response){
 //Check if the response is in expected JSON format.
  var flag = isJSON(response);
    if(flag === true)   
    { response = JSON.parse(response);  }              
    //Iterate the Array using for each loop of jquery
    $.each(response, function( index, value ) {
      console.log( "Index : " + index + "Value : " + value );
    });
  } // End of success function
}); //End of Ajax

//JSON format check
function isJSON(data) {
   var ret = true;
   try {
      JSON.parse(data);
   }catch(e) {
      ret = false;
   }
   return ret;
}
1

You can get array indexes and values by using .each in jQuery as:

$.ajax({
    url: "system/music_list.php",
    dataType: 'json',
    cache: false,
    success: function(response){
        $.each(response, function(index,value)
        {
            console.log(index); // print all indexes
            console.log(value); // print all values
        });
    },
});
1
<div id="dat" name="dat"></div>
<script type="text/javascript">
    $.ajax({ url: "music_list.php",
             dataType: 'json',
             cache: false,
             success:function(response) { 
                 for( res in response) {
                     document.getElementById('dat').innerHTML+=response[res]+"<br/>"; 
                 }
             }
         });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.