Looping over JSON response with $.each

Question

Hi got a problem I can only think of solving in a very crude way - wondering if anyone else has any other ideas - Basicly I am parsing over some JSON and appending each child to a div, however once i have appended 4 items I then need to add the remaining items to another div, here is the JSON i am using it is valid and this is only a snippet of the JSON:

    "X_bizCardServiceLinks": [
    {
        "name": "blogs",
        "js_eval": "generalrs.label_personcard_blogslink",
        "href": "https:\/\/dc3-epag-03.tm-gnet.com\/blogs\/roller-ui\/blog\/dbb8fac0-42e4-102e-9409-b38b9530f95e"
    },
    {
        "name": "quickr",
        "js_eval": "generalrs.label_personcard_quickrlink",
        "href": "https:\/\/dc3-epag-03.tm-gnet.com\/quickr\/allfiles\/people\/Jonathan.Popoola@trinitymirror.com"
    },
    {
        "name": "profiles",
        "js_eval": "generalrs.label_personcard_profilelink",
        "href": "https:\/\/dc3-epag-03.tm-gnet.com\/profiles\/html\/simpleSearch.do?searchFor=dbb8fac0-42e4-102e-9409-b38b9530f95e&searchBy=userid"
    },
    {
        "name": "activities",
        "js_eval": "generalrs.label_personcard_activitieslink",
        "href": "https:\/\/dc3-epag-03.tm-gnet.com\/activities\/service\/html\/mainpage#dashboard%2Cmyactivities%2Cuserid%3Ddbb8fac0-42e4-102e-9409-b38b9530f95e%2Cname%3DJonathan Popoola"
    },
    {
        "name": "dogear",
        "js_eval": "generalrs.label_personcard_dogearlink",
        "href": "https:\/\/dc3-epag-03.tm-gnet.com\/dogear\/html?userid=dbb8fac0-42e4-102e-9409-b38b9530f95e"
    },
    {
        "name": "communities",
        "js_eval": "generalrs.label_personcard_communitieslink",
        "href": "https:\/\/dc3-epag-03.tm-gnet.com\/communities\/service\/html\/allcommunities?userid=dbb8fac0-42e4-102e-9409-b38b9530f95e"
    },
    {
        "name": "wikis",
        "js_eval": "generalrs.label.personcard.wikislink",
        "href": "https:\/\/dc3-epag-03.tm-gnet.com\/wikis\/home\/search?uid=dbb8fac0-42e4-102e-9409-b38b9530f95e&name=Jonathan Popoola"
    },
    {
        "name": "files",
        "js_eval": "generalrs.label_personcard_fileslink",
        "href": "https:\/\/dc3-epag-03.tm-gnet.com\/files\/app\/person\/dbb8fac0-42e4-102e-9409-b38b9530f95e"
    }
],

I am currently trying the following :

    $.each(response.X_bizCardServiceLinks, function(){
            var name = this.name;
            var href = this.href;            

            if (name != "dogear") {

                $("#linkTable tr").append("<td><a href=\""+ href +"\">"+ name +"</a>");
            }
            else {
                    console.log(name, href);
                }
            });

As you can see once the name equals "dogear" the function moves on to the else but will only return the that link and not the remaining, any help would be greatly appreciated.

Answer 1

I suggest using the arguments jquery supply to your callback, which gives you an index and a value.

 $.each(response.X_bizCardServiceLinks, function(index, val){
        var name = this.name;
        var href = this.href;            

        if (index < 4) {

            $("#linkTable tr").append("<td><a href=\""+ href +"\">"+ name +"</a>");
        }
        else {
                console.log(name, href);
            }
        });

Answer 2

This is a math problem i guess:
$.each(response.X_bizCardServiceLinks, function(i, val){

  var mod = i % 4; var name = this.name; var href = this.href; if (mod==0) { $("#linkTable tr").append("<td><a href=\\""+ href +"\\">"+ name +"</a>"); } else { console.log(name, href); } }); 

or maybe i'm not understanding what you need... but with this approach you will always have 4 elements separated...