Wie kann ich meine JSON-Datei zur Arbeit bekommen?

Question

Ich greife aus, um zu sehen, ob ich eine Antwort auf eine JSON-Datei bekomme, mit der ich Probleme habe. Ich mache eine Slideshow in Rand animiert und ich benutze eine JSON-Datei, um einige Bilder in einige Platzhalter (symbolisierte divs) zu stecken, die ich alle 8 Sekunden animiert habe. oder so. Ich habe versucht, diese Informationen von einem Tutorial zu bekommen, das ich gesehen habe, aber ich war nicht in der Lage, die JSON-Datei einzurichten, wie es sein sollte. Wenn ich eine Vorschau der Folie in meinem Browser anschaue, werden meine Bilder nicht in die Platzhalter geladen. Alles, was ich sehe, sind graue Felder, die sich entsprechend der Animation bewegen. Meine beste Vermutung ist, dass meine JSON-Datei nicht korrekt ist, weshalb es die Bilder nicht mit dem Platzhalter verknüpft. dies ist mein Code:

var imageArray = new Array(); 
var currentImage = 0; 
var s = sym.getSymbol ("slider_Sym_A"); 
sym.$("Sample Slide").html(""); 

$.getJSON("LineA.json", function(data) { 
    for(var i=0; i<data.length; i++){ 
     imageArray.push({"image":data[i].image, "title":data[i].title}); 

    } 
    sym.$("Sample Slide").html(imageArray[currentImage].title); 
    s.$("ImageHolderOne1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"}); 
    s.play("Rest"); 
}); 

sym.grabNewImage = function(){ 
    currentImage++; 
    if (currentImage>7){ 
     currentImage = 0; 
} 
    s.$("ImageHolderTwo1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"}); 
} 

sym.setOldImage = function(){ 
    s.$("ImageHolderOne1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"}); 
    setTimeout(function() { 
    s.play("Rest"); 
    }, 500); 
} 

json:

[ 
    { 
"image":"PhotoA.gif", 
"title":"Re - Stage" 
    }, 
    { 
"image":"PhotoA_1.gif", 
"title":"ABDC" 
    }, 
    { 
"image":"PhotoA_2.gif", 
"title":"W - Stage" 
    }, 
    { 
"image":"PhotoA_3.gif", 
"title":"C - Stage" 
    }, 
{ 
"image":"PhotoA_4.gif", 
"title":"Riser" 
    }, 
    { 
"image":"PhotoA_5.gif", 
"title":"Sign" 
    }, 
    { 
"image":"PhotoA_6.gif", 
"title":"X - Stage" 
    }, 
    { 
"image":"PhotoA_7.gif", 
"title":"Jason" 
    } 
] 

ich jemanden schätzen, die mir jede Eingabe gibt. In der Zwischenzeit werde ich weiterhin versuchen, meinen Kopf darum zu wickeln.

Answer 1

I geändert Code ein bisschen die richtigen Selektoren zu verwenden (und minimieren redundanten Code)

Siehe unten (Hinweis: Viele hatten mit Selektoren zu tun)

var jsonData = [{ 
 
    "image": "http://placehold.it/400x200", 
 
    "title": "Re - Stage" 
 
}, { 
 
    "image": "http://placehold.it/400x200", 
 
    "title": "ABDC" 
 
}, { 
 
    "image": "http://placehold.it/400x200", 
 
    "title": "W - Stage" 
 
}, { 
 
    "image": "http://placehold.it/400x200", 
 
    "title": "C - Stage" 
 
}, { 
 
    "image": "http://placehold.it/400x200", 
 
    "title": "Riser" 
 
}, { 
 
    "image": "http://placehold.it/400x200", 
 
    "title": "Sign" 
 
}, { 
 
    "image": "http://placehold.it/400x200", 
 
    "title": "X - Stage" 
 
}, { 
 
    "image": "http://placehold.it/400x200", 
 
    "title": "Jason" 
 
}]; 
 

 
// keeps track of image currently on display 
 
var currentImage = 0; 
 

 
// Displays next image in JSON array until at last image of array 
 
// if already at the last image, resets to display first image 
 
var slideNext = function() { 
 
    if (currentImage >= jsonData.length) { 
 
    currentImage = 0; 
 
    } 
 

 
    var imgTitle = jsonData[currentImage].title; 
 

 
    $("#imageSlider").find('h1').html(imgTitle); 
 
    $("#imageSlider").find('img').attr('src', jsonData[currentImage].image + '?text=' + imgTitle); 
 
    currentImage++; 
 
}; 
 

 
// event handler for button (to display next image manually) 
 
$("#next").on('click', function() { 
 
    slideNext(); 
 
}); 
 

 
// every interval, display next image automatically 
 
setInterval(function() { 
 
    slideNext(); 
 
}, 3 * 1000); // time is in milliseconds so 3 * 1000 = 3 seconds

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="imageSlider"> 
 
    <h1>Image title</h1> 
 
    <img src="" /> 
 
</div> 
 
<button id="next">Next</button>