jquery .each() within a json array .

[netpumber]

Hi!

 

Server sends such a json object:

{"status":1,"recId":"PL-17534","collectionDate":"08-04-2014","collectorsName":"asdf","donorsName":"","sciName":"asdf","family":"asdf","comName":"asdf","variety":"","area":"asdf","photoFiles":["1.jpg","internet.jpg"]}

So i want to change the html content of an element , by customizing the contents of json object in the photoFiles array.

 

I tried something like this but doesn't seem to work

 

$('#photosTab').html(function(){
    $.each(json.photoFiles, function(i,item){
    return '<img src="'+json.photoFiles[0]+'"><br>';
    })
});

Any idea ?

 

[goodacre.liam]

You probably want something like:

//  Renders a single item as html
var renderItem = function (item) {
  return '<img src="' + encodeURI(item) + '">'
}

//  Render and display all the photo file items
$('#photosTab').html($.map(json.photoFiles, renderItem))

Before you get unnecessarily far down the rabbit hole with manual dom interaction, take a look into Facebook's React library.

It allows you to program much more intuitively, and simply by saying that your 'view' is a function of the state of your application at any point in time.

 

 

Hope this helps.

[Drongo_III]

The example code below returns the values of the photoFiles array:

var json = {"status":1,"recId":"PL-17534","collectionDate":"08-04-2014","collectorsName":"asdf","donorsName":"","sciName":"asdf","family":"asdf","comName":"asdf","variety":"","area":"asdf","photoFiles":["1.jpg","internet.jpg"]};

	
	$.each(json.photoFiles, function(key, val){
		 //return '<img src="'+val+'"><br>';
		 console.log( '<img src="'+val+'"><br>');
		
	});

I'm not sure I fully understand what you are trying to achieve by returning in an anonymous function but that code works to give you access to each of the values.