Jquery get link values from data object

Question

I can't for the life of me figure out how to access the values inside this object. Any help would be much apreciated

End goal, once I can access the link, i'll iterate each and append and img tag to the dom after the images-header element.

JS to consume json

$("#stack_name").focusout(function() {
  var name = $(this).val();
  // alert(name);

  $.getJSON('/images.json?name='+ name, function(data) {
    console.log("DATA: ", data);
    // $('<p>Test</p>').appendTo('.images-header');
  });
});

Console Log outputs:

DATA:  
Object {data: Object}
data: Object
images: Array[4]
0: "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Connecticut_in_United_States.svg/270px-Connecticut_in_United_States.svg.png"
1: "http://www.enchantedlearning.com/usa/states/connecticut/map.GIF"
2: "https://familysearch.org/learn/wiki/en/images/0/01/Connecticut-county-map.gif"
3: "http://www.ct.gov/ecd/lib/ecd/20/14/state%2520of%2520connecticut%2520county%2520outline.jpg"
length: 4
__proto__: Array[0]
__proto__: Object
__proto__: Object
 app-init.js?body=1:15

enter image description here

/images.json?name=connecticut

{
"data": {
"images": [
"http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Connecticut_in_United_States.svg/270px-Connecticut_in_United_States.svg.png",
"http://www.enchantedlearning.com/usa/states/connecticut/map.GIF",
"https://familysearch.org/learn/wiki/en/images/0/01/Connecticut-county-map.gif",
"http://www.ct.gov/ecd/lib/ecd/20/14/state%2520of%2520connecticut%2520county%2520outline.jpg"
]
}
}

Adil · Accepted Answer · 2013-07-25 03:14:08Z

1

You can access images array like this, you have have to parse json string using $.parseJSON

img1 = jsonObj.data.Images[0];

Live Demo

You can iterate through array using for loop

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

edited Jul 25, 2013 at 3:14

answered Jul 21, 2013 at 17:54

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jahrichie Over a year ago

thanks for the response. Couldnt get this to work. I get "Uncaught ReferenceError: Data is not defined" with the first one and "Uncaught TypeError: Cannot read property '0' of undefined" for the second

jahrichie Over a year ago

added an ex route that's being consumed

Adil Over a year ago

@jahrichie, I have updated my answer with live demo, I hope it will help.

Tomas Santos · Accepted Answer · 2013-07-21 19:16:08Z

0

Try

Fiddle Demo

$("#stack_name").focusout(function() 
{
  var name = $(this).val();

  $.getJSON('/images.json?name='+ name, function(data) 
  {
    var images = data.data.images;
    var $header = $('.images-header');

    for(var index in images )
    {
      var $image = $('<img><img/>'); 
      var link = images[index];

      $image.attr("src", link);
      $header.append($image);
    }

  });
});

edited Jul 21, 2013 at 19:16

answered Jul 21, 2013 at 18:04

Tomas Santos

5504 silver badges12 bronze badges

2 Comments

jahrichie Over a year ago

thanks for re, this didn't do anything or give any errors. weird/

Tomas Santos Over a year ago

@jahrichie Please look at demo.

Collectives™ on Stack Overflow

Jquery get link values from data object

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related