Ändern Sie Bilder mit jQuery basierend auf JSON-Daten

Question

Ich fummle mit jQuery und JSON, im Grunde versucht, eine Wetter-App zu machen. Ich möchte Gifs gemäß den Daten anzeigen.

Beispiel Daten aus der API kommen:

"time": 1468261711, 
"summary": "Clear", 
"icon": "clear-day", 

Ich kenne die möglichen Werte bereits so mag ich wie ein Array machen, wenn die Zusammenfassung Objekt ist „Clear“, Anzeige sunny.gif.

Was wäre eine gängige Methode, um dies zu erreichen?

Answer 1

Ohne mehr Beispielcode, es ist schwierig, über die beste Lösung zu beraten.

Sie können ein Objekt mit Schlüsseln erstellen, die auf die Zusammenfassung und die Werte verweisen, die auf das GIF verweisen.

dh:

var gifs = { 
    "Clear": "clear.gif", 
    "Sunny": "sunny.gif" 
}; 

Nun, wenn Sie die Daten aus der API analysieren durch. Sie können das relevante GIF erhalten.

var weatherObject = { 
    "time": 1468261711, 
    "summary": "Clear", 
    "icon": "clear-day" 
} 

var gif = gifs[weatherObject.summary]; // Returns clear.gif 

Lesen Sie mehr über JS here Objekte.

Answer 2

Sie können ein Hash-Objekt, das das Wetter Zusammenfassung des gif-Karten wie:

var map = { 
    "Cloudy": { 
     "media": "../images/weather-cloudy.gif" 
    }, 
    "Clear": { 
     "media": "../images/weather-sunny.gif" 
    } 
}; 

Auf Ihrem API Ajax Rückruf könnten Sie basierend auf dieser Karte info machen:

$.get("api/weather?q=Newyork") 
    .done(function (data) { 

     var html = yourHandlebarsCompiledTemplateForExample({ 
      apiData: data, 
      mappedInfo: map[data.summary] 
     }); 

     $(html).appendTo("#weather-contanier"); 
    });