CODEWITHSUNDEEP
javascriptjqueryarraysjson
Jason
Jason

Reputation: 1

How to get the value from the next json array node

I have a JSON problem that perhaps someone can help me with. I have the following JSON array which I’m calling “showresults”:

    [  
   {  
      "UniqueCode":"98917",
      "NetworkUC":"c99af",
      "Name":"Born This Way",
      "ShowImage":"./assets/Born_This_Way_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"f583f",
      "NetworkUC":"c99af",
      "Name":"Bates Motel",
      "ShowImage":"./assets/Bates_Motel_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"66ede",
      "NetworkUC":"c99af",
      "Name":"60 Days In",
      "ShowImage":"./assets/60_Days_In_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"c3ecf",
      "NetworkUC":"c99af",
      "Name":"Intervention",
      "ShowImage":"./assets/Intervention_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"0cac8",
      "NetworkUC":"c99af",
      "Name":"Wahlburgers",
      "ShowImage":"./assets/Wahlburgers_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"a5866",
      "NetworkUC":"c99af",
      "Name":"Leah Remini: Scientology and the Aftermath",
      "ShowImage":"./assets/Leah_remini_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"263f5",
      "NetworkUC":"c99af",
      "Name":"L.A. Burning: The Riots 25 Years Later",
      "ShowImage":"./assets/LA_burning_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"804b6",
      "NetworkUC":"c99af",
      "Name":"Biggie: The Life of Notorious B.I.G.",
      "ShowImage":"./assets/Biggie_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"6a9ce",
      "NetworkUC":"c99af",
      "Name":"The Murder of Laci Petersen",
      "ShowImage":"./assets/Laci_paterson_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"b5513",
      "NetworkUC":"c99af",
      "Name":"Who Killed Tupac?",
      "ShowImage":"./assets/Tupac_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"29b95",
      "NetworkUC":"c99af",
      "Name":"Life, Animated",
      "ShowImage":"./assets/Life_animated_502x502.jpg",
      "ShowLogo":"null"
   },
   {  
      "UniqueCode":"2d576",
      "NetworkUC":"c99af",
      "Name":"Live PD",
      "ShowImage":"./assets/Livepd_502x502.jpg",
      "ShowLogo":"null"
   }
]

I have a 2 span tags that are created that will display the “Name” node value. The problem that I can’t seen to figure out is if the page is currently displaying the content from showresults[3], I want one span tag to display the value of showresults[2].Name and another to display showresults[4].Name. Here is my code:

if (showresults.length > 0){

        var first = showresults[0];
        var count = showresults.length;

        var toparrow = document.createElement("img");
        toparrow.setAttribute("class", "top_arrow");
        toparrow.setAttribute("src", "./images/top_arrow.jpg");
        toparrow.setAttribute("uc", UniqueCode);
        toparrow.addEventListener("click",LoadVideo);

        var downarrow = document.createElement("img");
        downarrow.setAttribute("class", "down_arrow");
        downarrow.setAttribute("src", "./images/down_arrow.jpg");
        downarrow.setAttribute("uc", UniqueCode);
        downarrow.addEventListener("click", LoadVideo);

        var backShow = document.createElement("span");
        backShow.setAttribute("class","back");
        backShow.setAttribute("uc", UniqueCode);
        backShow.addEventListener("click", LoadVideo);

        var forwardShow = document.createElement("span");
        forwardShow.setAttribute("class","forward");
        forwardShow.addEventListener("click", LoadVideo);

        for (var i = 0; i < showresults.length; i++) {

            if (i == 0){

                var curobj = showresults[i];
                var curobjnext = showresults[i++];
                var curobjprevious = showresults[i--];
                var UniqueCode = curobj["UniqueCode"];
                var Name = curobj["Name"];
                var NameNext = curobjnext["Name"];
                var NamePrevious = curobjprevious[Name];

                backShow.innerHTML = NamePrevious;
                forwardShow.innerHTML = NameNext;

                if(curobj == first){
                    $('#video').append(downarrow);
                    $('#video').append(forwardShow);
                } else {
                    $('#video').append(toparrow);
                    $('#video').append(downarrow);
                    $('#video').append(backShow);
                    $('#video').append(forwardShow);
                }


            }


        }


    }

The "NameNext" and "NamePrevious" variables are not returning the expected results. Can someone please point me in the right direction?

Upvotes: 0

Views: 60

Answers (2)

jlaitio
jlaitio

Reputation: 1948

People haven't told you what you did wrong:

i++ is a statement that increments the variable while returning the original value, so equal to {i = i + 1, return i - 1}, so it actually modifies the value of i. So this is what's happening:

var curobj = showresults[i]; // i was 3
// i == 3
var curobjnext = showresults[i++]; // i was 3
// i == 4
var curobjprevious = showresults[i--]; // i was 4
// i == 3

You don't want to modify the value as you're progressing, so i+1 and i-1 are more appropriate expressions.

Upvotes: 1

Dominik
Dominik

Reputation: 6313

Change it to this:

if (showresults.length > 0){

    var first = showresults[0];
    var count = showresults.length;

    var toparrow = document.createElement("img");
    toparrow.setAttribute("class", "top_arrow");
    toparrow.setAttribute("src", "./images/top_arrow.jpg");
    toparrow.setAttribute("uc", UniqueCode);
    toparrow.addEventListener("click",LoadVideo);

    var downarrow = document.createElement("img");
    downarrow.setAttribute("class", "down_arrow");
    downarrow.setAttribute("src", "./images/down_arrow.jpg");
    downarrow.setAttribute("uc", UniqueCode);
    downarrow.addEventListener("click", LoadVideo);

    var backShow = document.createElement("span");
    backShow.setAttribute("class","back");
    backShow.setAttribute("uc", UniqueCode);
    backShow.addEventListener("click", LoadVideo);

    var forwardShow = document.createElement("span");
    forwardShow.setAttribute("class","forward");
    forwardShow.addEventListener("click", LoadVideo);

    for (var i = 0; i < showresults.length; i++) {

        if (i == 0){

            var curobj = showresults[i];
            var curobjnext = showresults[i+1];      // change here
            var curobjprevious = showresults[i-1];  // and here
            var UniqueCode = curobj["UniqueCode"];
            var Name = curobj["Name"];
            var NameNext = curobjnext["Name"];
            var NamePrevious = curobjprevious[Name];

            backShow.innerHTML = NamePrevious;
            forwardShow.innerHTML = NameNext;

            if(curobj == first){
                $('#video').append(downarrow);
                $('#video').append(forwardShow);
            } else {
                $('#video').append(toparrow);
                $('#video').append(downarrow);
                $('#video').append(backShow);
                $('#video').append(forwardShow);
            }


        }


    }


}

But what I don't get is that you only show the very first item via: if (i == 0){ which means in showresults[i-1] i will be -1... so either go infinite via showresults[showresults.length] or don't display a result for previous...

Upvotes: 1

Related Questions