时间戳

首页 > 解决方案 > 从选定的 Object.keys 获取和使用值

jquery - 从选定的 Object.keys 获取和使用值

问题描述

我有一个数组如下。

var Brand = { "Brand1-Parameter1-SubBrand1": [{ "Image": "animal", "Heading": "SubBrand1", "Link": "SubBrand1" }], 
                "Brand1-Parameter1-SubBrand2": [{ "Image": "animal", "Heading": "SubBrand2", "Link": "SubBrand2" }], 
                "Brand1-Parameter2-SubBrand3": [{ "Image": "water", "Heading": "SubBrand3", "Link": "SubBrand3" }], 
                "Brand1-Parameter2-SubBrand4": [{ "Image": "water", "Heading": "SubBrand4", "Link": "SubBrand4" }], 
                "Brand2-Parameter1-SubBrand5": [{ "Image": "travel", "Heading": "SubBrand5", "Link": "SubBrand5" }], 
                "Brand2-Parameter1-SubBrand6": [{ "Image": "travel", "Heading": "SubBrand6", "Link": "SubBrand6" }], 
                "Brand2-Parameter2-SubBrand7": [{ "Image": "flower", "Heading": "SubBrand7", "Link": "SubBrand7" }], 
                "Brand2-Parameter2-SubBrand8": [{ "Image": "flower", "Heading": "SubBrand8", "Link": "SubBrand8" }], 
            }

一个小的过滤器函数为我提供了上述数组中的两个 Object.key：

var ParentBrandParameterKeys = Object.keys(Brand).filter(v => v.split("-").includes(ParentBrandSelected) && v.split("-").includes(ParameterSelected))

console.log(ParentBrandParameterKeys) 给了我以下信息：

["Brand1-Parameter1-SubBrand1", "Brand1-Parameter1-SubBrand2"]

我需要的是使用上述选定键的值来构建一个小的 div 结构，如下所示：

jQuery.each(ParentBrandParameterKeys, function(index, value){
        markup += '<a href="/Directory/SubDirectory/'+ Brand[value].Link +'.html">'
        markup += '<div class="InnerBlock">'
        markup += '<div style="background-image:url(https://source.unsplash.com/1280x720/?' + Brand[value].Image +')">'+ Brand[value].Heading +'</div>'
        markup += '</div>'
        markup += '</a>'
     });

但这行不通。如何获取所选 Object.keys 的值？

标签： jqueryarrayskey

解决方案

正如您从您的结构中看到的那样，与"Brand1-Parameter1-SubBrand1"（例如）相关联的有一个数组，里面有一个对象，因此您的函数应该如下所示：

jQuery.each(ParentBrandParameterKeys, function(index, value){
    markup += '<a href="/Directory/SubDirectory/'+ Brand[value][0].Link +'.html">'
    markup += '<div class="InnerBlock">'
    markup += '<div style="background-image:url(https://source.unsplash.com/1280x720/?' + Brand[value][0].Image +')">'+ Brand[value][0].Heading +'</div>'
    markup += '</div>'
    markup += '</a>'
 });

推荐阅读