Retrieve values from JSON at a specific index

Question

I've called some data via AJAX and want to work with just a subset of that data but unsure how to target it. So the data describes 'folders' at the top level and image file names within each folder. Based on a links index when clicked, I want to retrieve all the image names of the folder at that same index.

I'm using jQuery so that's available if the best option.

Below is my data structure and the code I'm trying:

DATA:

[
 {"folder":"Folder Name 1",
 "images":
  [
  {"name":"folder_1_image01.jpg"},
  {"name":"folder_1_image02.jpg"},
  {"name":"folder_1_image03.jpg"}
  ]
 },
 {"folder":"Folder Name 2", 
 "images":
  [
  {"name":"folder_2_image01.jpg"},
  {"name":"folder_2_image02.jpg"},
  {"name":"folder_2_image03.jpg"}
  ]
 }
]

CODE:

$.ajax({
        url: 'my-url-to-json.json',
        dataType: 'json',
        timeout: 5000,
        success: function(data, status){
            $('#myLinks a').on('click', function() {
                var thisIndex = $(this).index();                
                    $.each(data.images[thisIndex], function(key, value) {
                            alert(key + ': ' + value);
                    });  
                });  
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });

Answer 1

Here's an example click handler for your data.

 var data = [ {"folder":"Folder Name 1", "images": [ {"name":"folder_1_image01.jpg"}, {"name":"folder_1_image02.jpg"}, {"name":"folder_1_image03.jpg"} ] }, {"folder":"Folder Name 2", "images": [ {"name":"folder_2_image01.jpg"}, {"name":"folder_2_image02.jpg"}, {"name":"folder_2_image03.jpg"} ] } ]; $('.link').on('click', function() { var idx = $(this).index(); var imgArr = $(data[idx].images); var images = []; for (var i = 0; i < imgArr.length; i++) { images.push(imgArr[i].name); } console.log(images); $('#images').html(images.join('<br />')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> <div id="images"></div> 

Answer 2

Try

var links = $("#myLinks a");
$.ajax({
        url: "url",
        dataType: "json",
        timeout: 5000,
        success: function(data, status){
            links.on("click", function(e) {
                var thisIndex = $(e.target).index();     
                    var images = data[thisIndex].images;
                    $.each(images, function(key, value) {                           
                        console.log(key + ":" + value.name);
                    });                          
                });  
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });

jsfiddle http://jsfiddle.net/58shtvrc/