Anzeigen von Bildern basierend auf dynamischem Array

Question

Ich habe ein servergeneriertes Array, das bis zu sechs Array-Elemente zurückgeben kann. Bei diesen Array-Elementen handelt es sich um "Kategorien", die je nach Kategorie ein anderes Bild anzeigen (Es gibt acht benutzerdefinierte Bilder, die aus jeder Kategorie ausgewählt werden können, aber dies geschieht im Hintergrund). Es wird also nur ein Bild pro Kategorie erstellt. Es kann jedoch auch ein "benutzerdefiniertes" Bild hochgeladen werden, das Priorität hat, falls vorhanden. In der Realität gibt der Server ein oder zwei Bilder pro Kategorie zurück. Obendrein kann ein Benutzer in mehrere Kategorien fallen, also muss ich eine Prioritätsstufe basierend auf der Kategorie hinzufügen, so dass die eine die andere überschreibt. Ich versuche herauszufinden, wie ich effizient damit umgehen und kämpfen kann. Besonders im Prioritätsbereich; Soll ich dem Array einen weiteren Namespace hinzufügen, um die Prioritätsstufe anzugeben und anhand des niedrigsten Werts zu bestimmen? Was ist der effizienteste Weg, Array-Werte zu vergleichen und Ergebnisse zurückzugeben?

Edit: Mit effizienten, ich meine, skalierbar und wartbar, nicht unbedingt performant.

console.clear(); 
 
// banner element 
 
var banner = document.getElementById('banner'); 
 
// 3s timout 
 
window.setTimeout(function() { 
 
    // add class (class handles fade transition) 
 
    banner.classList.add('fade-in'); 
 
}, 3000); 
 

 
// Array generated from "Architecture Priorities" field, not all will display, but more than one can. 
 
var arc = [ 
 
    'Collaboration', 
 
    'Data Center',/* 
 
    'Enterprise Networks', 
 
    'Security', 
 
    'Services',*/ 
 
    'Cross Architecture' 
 
    ], 
 
    
 
    // manual array and image defaults (will need to utilize zval() for "path") 
 
    img = [{ 
 
    name: 'Collaboration', 
 
    path: '//placehold.it/1200x400/fa4/fff', // value returned from server based on user input. 
 
    customPath: '' // value returned from server based on user input 
 
    }, { 
 
    name: 'Data Center', 
 
    path: '//placehold.it/1200x400/4af/fff', 
 
    customPath: '' 
 
    }, { 
 
    name: 'Enterprise Networks', 
 
    path: '//placehold.it/1200x400/af4/fff', 
 
    customPath: '' 
 
    }, { 
 
    name: 'Security', 
 
    path: '//placehold.it/1200x400/4fa/fff', 
 
    customPath: '' 
 
    }, { 
 
    name: 'Services', 
 
    path: '//placehold.it/1200x400/f4a/fff', 
 
    customPath: '' 
 
    }, { 
 
    name: 'Cross Architecture', 
 
    path: '//placehold.it/1200x400/a4f/fff', 
 
    customPath: '//placehold.it/1200x400/222/fff?text=custom' 
 
    }]; 
 

 
for (var prop in img) { 
 
    if (img.hasOwnProperty(prop)) { 
 
    for(var i = 0; i < arc.length; i++) { 
 
     if(img[prop].name === arc[i]){ 
 
     if (img[prop].customPath !== '') { 
 
     \t banner.setAttribute('src', img[prop].customPath); 
 
     } else { 
 
      banner.setAttribute('src', img[prop].path); 
 
     } 
 
     } 
 
    } 
 
    } 
 
}

.banner-wrapper { 
 
    max-width: 1200px; 
 
    background: transparent url('//placehold.it/1200x400/222/fff') no-repeat center center/cover; 
 
} 
 

 
img { 
 
    vertical-align: baseline; 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
    opacity: 0; 
 
    transition: opacity 2s; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
} 
 

 
img.fade-in { 
 
    opacity: 1; 
 
}

<div class="banner-wrapper"> 
 
    <img src="//placehold.it/1200x400/fff/222" width="1200" height="400" id="banner"> 
 
</div>

Answer 1

würde ich versuchen. Ich füge Prioritätsschlüssel in deine IMG Sammlung ein, dann nehme ich IMG mit der höchsten Priorität.

var arc = [ 
    "Collaboration", 
    "Data Center" /* 
    'Enterprise Networks', 
    'Security', 
    'Services',*/, 
    "Cross Architecture" 
]; 
var imgs = [ 
    { 
    name: "Collaboration", 
    path: "//placehold.it/1200x400/fa4/fff", // value returned from server based on user input. 
    customPath: "", // value returned from server based on user input, 
    priority: 0 
    }, 
    { 
    name: "Data Center", 
    path: "//placehold.it/1200x400/4af/fff", 
    customPath: "", 
    priority: 1 
    }, 
    { 
    name: "Enterprise Networks", 
    path: "//placehold.it/1200x400/af4/fff", 
    customPath: "", 
    priority: 0 
    }, 
    { 
    name: "Security", 
    path: "//placehold.it/1200x400/4fa/fff", 
    customPath: "", 
    priority: 1 
    }, 
    { 
    name: "Services", 
    path: "//placehold.it/1200x400/f4a/fff", 
    customPath: "", 
    priority: 1 
    }, 
    { 
    name: "Cross Architecture", 
    path: "//placehold.it/1200x400/a4f/fff", 
    customPath: "//placehold.it/1200x400/222/fff?text=custom", 
    priority: 0 
    }, 
    { 
    name: "Collaboration", 
    path: "//placehold.it/1200x400/fa4/fff", // value returned from server based on user input. 
    customPath: "", // value returned from server based on user input, 
    priority: 1 
    }, 
    { 
    name: "Data Center", 
    path: "//placehold.it/1200x400/4af/fff", 
    customPath: "", 
    priority: 0 
    }, 
    { 
    name: "Enterprise Networks", 
    path: "//placehold.it/1200x400/af4/fff", 
    customPath: "", 
    priority: 1 
    }, 
    { 
    name: "Security", 
    path: "//placehold.it/1200x400/4fa/fff", 
    customPath: "", 
    priority: 0 
    }, 
    { 
    name: "Services", 
    path: "//placehold.it/1200x400/f4a/fff", 
    customPath: "", 
    priority: 0 
    }, 
    { 
    name: "Cross Architecture", 
    path: "//placehold.it/1200x400/a4f/fff", 
    customPath: "//placehold.it/1200x400/222/fff?text=custom", 
    priority: 1 
    } 
]; 
var priotiziredImgs = {}; 
imgs.forEach(img => { 
    if (arc.indexOf(img.name) > -1) { 
    let name = img.name; 
    if (priotiziredImgs[name]) { 
     priotiziredImgs[name] = 
     img.priority > priotiziredImgs[name].priority 
      ? img 
      : priotiziredImgs[name]; 
    } else { 
     priotiziredImgs[name] = img; 
    } 
    } 
}); 

Damit erhalten Sie Bilder mit der höchsten Priorität für eine bestimmte Kategorie. Und dann kannst du eine Schleife wiederholen, um sie an das dom anzuhängen.

Object.keys(priotiziredImgs).forEach(name => { 
    let src = priotiziredImgs[name].customPath.length 
    ? priotiziredImgs[name].customPath 
    : priotiziredImgs[name].path; 
    banner.setAttribute("src", src); 
});