How to loop through returned JSON data

Question

I am currently creating a JSON form in a custom Joomla component that makes a call to a function to grab an array of postcodes then returns this to the view. I then want to loop through all the returned postcodes in order to display them. I can't seem to get the jQuery.each loop to loop through the returned values correctly. Here is my code:

view:

jQuery.each(data.postcode, function() {
        html += "<span class='btn posctodeInv'>" + v + "</span>";                       
    });

controller:

$club_id = $_POST['club_id'];
$model = $this->getModel('postcodes');
$postcodes = $model->getClubPostcodes($club_id);

header('Content-Type: application/json');
echo json_encode($postcodes);

model:

public function getClubPostcodes($club_id) {
        $query = "SELECT postcode FROM #__postcodes_to_club WHERE club_id = '" . (int)$club_id . "'";
        $this->_db->setQuery($query);
        $result = $this->_db->loadAssocList();

        return $result;
    }

and the returned json shown in Firebug console:

[{"postcode":"cr4"},{"postcode":"cr5"},{"postcode":"cr6"}]

Can anyone shed any light as to why my loop is throwing up an error? Thanks!

Pouki · Accepted Answer · 2013-04-10 09:40:40Z

2

Try

jQuery.each(data, function(index, val) {
    html += "<span class='btn posctodeInv'>" + val.postcode + "</span>";                       
});

answered Apr 10, 2013 at 9:40

Pouki

1,66412 silver badges19 bronze badges

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

1 Comment

James Over a year ago

Brilliant this worked. Thanks! Been on holiday for two weeks so don't think my brain is quite working correctly yet!

Pathik Gandhi · Accepted Answer · 2013-04-10 09:39:48Z

2

Try, need index and val parameter to loop in jQuery.each

jQuery.each(data, function(index, val) {
        html += "<span class='btn posctodeInv'>" + val.postcode + "</span>";                       
    });

answered Apr 10, 2013 at 9:39

Pathik Gandhi

1,3441 gold badge18 silver badges37 bronze badges

Comments

Philip Sams · Accepted Answer · 2013-04-10 10:15:25Z

0

var jsonp = '[{"Lang":"jQuery","ID":"1"},{"Lang":"C#","ID":"2"}]';
  var obj = $.parseJSON(jsonp);
  $.each(obj, function() {
      alert( this['Lang']);
  });

I think your problem is similar as above. Try above method

answered Apr 10, 2013 at 10:15

Philip Sams

298 bronze badges

Collectives™ on Stack Overflow

How to loop through returned JSON data

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related