Jquery mobile each loop over JSON not working

Question

I have a mobile app, the first page shows a list of categories, when click on one category go to second page passing the category id on the url and showing a list of business names under that category.
The data is on MySQL so I'm using jSON
Everything is working OK, but instead of showing a list of business names, it shows only the first business repeated 14 times (each business has 14 fields), so instead of looping on the 5 business under one category, looks like is looping inside the fields of the first business of the category and repeating the business name.

Here is the jquery:

$('#businessListPage').live('pageshow', function(event) {
    var id = getUrlVars()["id"];
    $.getJSON(serviceURL + 'getbusiness.php?id='+id, displayBusiness);
});

function displayBusiness(data) {
    var business = data.item;
    console.log(business);
    $.each(business, function(index)  {
        $('#actionList').append('<li><a href="">' +
             business.business + '</a></li>');
})
    $('#actionList').listview('refresh');

}

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

This is the html

 <div id="businessListPage" data-role="page" data-add-back-btn="true">
        <div data-role="header">
        <h1>Business List</h1>
    </div>

  <div data-role="content"> 

<ul id="actionList" data-role="listview" data-inset="true"></ul>

I tried a lot of stuff but I'm not good at jquery, I will appreciate any help. Thanks

**Add this:

This is the php if this helps... I have a normalized table that linke the categories with the business, I tested the Select part and is working well.

<?php
include 'config.php';

$sql = "select * " . 
        "from directory2 WHERE ID IN(SELECT dirID FROM cat2dir WHERE catID =:id)group by business order by business ";


try {
    $dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $dbh->prepare($sql);  
    $stmt->bindParam("id", $_GET[id]);
    $stmt->execute();
    $businesses = $stmt->fetchObject();  
    $dbh = null;
    echo '{"item":'. json_encode($businesses) .'}'; 
        } catch(PDOException $e) {
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}

?>

what does the json your server returns look like?

bluetoft
– bluetoft

2013-07-25 16:41:20 +00:00
Commented Jul 25, 2013 at 16:41 — bluetoft
– bluetoft, Commented Jul 25, 2013 at 16:41
Like this canadianholisticdirectory.ca/mobile/show.jpg

user2585262
– user2585262

2013-07-25 17:26:00 +00:00
Commented Jul 25, 2013 at 17:26 — user2585262
– user2585262, Commented Jul 25, 2013 at 17:26

vipulsharma · Accepted Answer · 2013-07-25 16:45:48Z

2

As far as I can infer from your code your JSON has a key name which you want to loop.

change the each to

$.each(business, function(index)  {
        $('#actionList').append('<li><a href="">' +
             index.business + '</a></li>');
});

You have used business.business . Which may be causing problems.

answered Jul 25, 2013 at 16:45

vipulsharma

1,2501 gold badge8 silver badges16 bronze badges

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

2 Comments

user2585262 Over a year ago

I because business is the name of the column for the business name, when I change it to index it shows the 14 items with undefined

vipulsharma Over a year ago

try adding console.log(index); in the each loop and tell what it sends back.

bluetoft · Accepted Answer · 2013-07-25 17:30:13Z

0

You probably need to change

business.business to busines[index].business

$.each(business, function(index)  {
        $('#actionList').append('<li><a href="">' +
             business[index].business + '</a></li>');
});

or use the second parameter in the each loop, value

$.each(business, function(index, val)  {
            $('#actionList').append('<li><a href="">' +
                 val.business + '</a></li>');
    });

But this is all without knowing the structure of your json returned from your ajax request. You'll most likely have to step through the function with a javascript debugger in order to determine the exact properties you're trying to access.

answered Jul 25, 2013 at 17:30

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

1 Comment

bluetoft Over a year ago

You really need to use something like firebug net tab to inspect what you're actually getting in your ajax request. You can also use this tool to step through your javascript to see what properties you have access to.

Collectives™ on Stack Overflow

Jquery mobile each loop over JSON not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related