How to iterate through json arrays

Question

I'm stuck in a script here, not sure how to get it to print in the div I set up. I imagine it's something related to how I'm handling the response. The response in chrome devtools looks like this:

{
    "[\"record one\", \"/description\"]": 0
}

I've attempted to use both each and map to iterate the data out but so far not going anywhere. I'm brand new to js and jquery, so the script is mostly from reading and examples.

Maybe some kind of nested loop? Here is my code -

 $(function() {
  return $('#myslider').slider({
    range: true,
    min: 0,
    max: 20,
    values: [1, 20],
    stop: function(event, ui) {
      var max, min;
      min = ui.values[0];
      max = ui.values[1];
      $('#range').text(min + ' - ' + max);
      $.ajax({
        url: '/dir_scan',
        type: 'get',
        data: {
          min: min,
          max: max
        },
        dataType: 'json',
        success: function(response) {
          var albums;
          albums = response;
          $.each(albums, function(index, obj) {
            var albumname, artist, li_tag;
            li_tag = '';
            albumname = obj.AlbumName;
            artist = obj.Artist;
            li_tag += '<li>Artist: ' + artist + ', Album: ' + albumname + '</li>';
            $('#result').append($(li_tag));
            return console.log;
          });
        }
      });
    }
  });
});

Answer 1

As Will said in the comments, the JSON looks off.

But, you're on the right track of using .each, as it looks that you're returning an array of objects.

Here's an example of what to do:

    var li_tag = '';
    $.each(albums, function(index, obj) {
        var albumname = obj.AlbumName;
        var artist = obj.Artist
        li_tag += '<li>Artist: ' + artist + ', Album: ' + albumname + '</li>';
        $('#result').append($(li_tag));
        return console.log;
    });

Additionally, 'albums' should be set to the returned response of the success function. You're potentially creating a bunch of headache to try and decipher from the window.location; especially since the json example looks malformed. And, any work done with the data returned from the ajax call, should occur in the success function.

Answer 2

Here is how iteration worked for this situation. Comments in code -

success: function(response) {
  var albums;
   // side issue - but I had to clear the div to get a complete refresh
    $('#result').empty();
      albums = response;
        $.each(albums, function(key, value) {
          var albumname, li_tag, path;
          li_tag = '';
        // I found I had to do this parseJSON call otherwise 
        // I had no correct key/value pair, even though I had set dataType 
        // to JSON
        albumname = jQuery.parseJSON(key);
      path = albumname[1];
    li_tag += '<li ><a href=/album' + encodeURI(albumname[1]) + '>' + albumname[0] + '</a href></li>';
  $('#result').append($(li_tag));
 return console.log;
 });

Actually, value in the code is just the index number, but I had the actual key/value pair separated by commas, so again the parseJSON seemed to be the only way it would work. This, despite trying things like split and substr. Hope my answer is clear if not I can edit.