从 JSON 中获取随机对象，然后从该对象中获取另一个随机对象

Question

我正在尝试向用户显示随机横幅。我有两种类型的广告，图片和滑块。我想随机选择其中一个，然后从之前选择的广告类型中随机选择一个广告。所以我想随机获取imageAds 或sliderAds 对象，然后随机获取选定imageAds 或sliderAds 的一个子对象。

这是我的 JSON：

var campaign = {
    imageAds: {
        imageAd1: {
            img: 'imageAd1/imageURL',
            button: {
                text: 'imageAd1 button text',
                link: 'imageAd1 button link',
                color: '#fff',
            },
            headline: {
                text: 'imageAd1 headline',
                color: '#fff',
            },
            spots: {
                spot1: {
                    img: 'spot1 img',
                    text: 'spot1 text',
                    color: '#fff',
                },
                spot2: {
                    img: 'spot2 img',
                    text: 'spot2 text',
                    color: '#fff',
                },
                spot3: {
                    img: 'spot3 img',
                    text: 'spot3 text',
                    color: '#fff',
                },
            },
            footer: {
                text: 'imageAd1 footer',
                color: '#fff',
            },
        },
        imageAd2: {
            img: 'imageAd2/imageURL',
            button: {
                text: 'imageAd2 button text',
                link: 'imageAd2 button link',
                color: '#fff',
            },
            headline: {
                text: 'imageAd2 headline',
                color: '#fff',
            },
            spots: {
                spot1: {
                    img: 'spot1 img',
                    text: 'spot1 text',
                    color: '#fff',
                },
                spot2: {
                    img: 'spot2 img',
                    text: 'spot2 text',
                    color: '#fff',
                },
                spot3: {
                    img: 'spot3 img',
                    text: 'spot3 text',
                    color: '#fff',
                },
            },
            footer: {
                text: 'imageAd2 footer',
                color: '#fff',
            },
        },
    }, 
    sliderAds: {
        sliderAd1: {
            slide1: {
                img: 'slide1/imageURL',
                button: {
                    text: 'slide1 button text',
                    link: 'slide1 button link',
                    color: '#fff',
                },
                headline: {
                    text: 'slide1 headline',
                    color: '#fff',
                },
                spots: {
                    spot1: {
                        img: 'spot1 img',
                        text: 'spot1 text',
                        color: '#fff',
                    },
                    spot2: {
                        img: 'spot2 img',
                        text: 'spot2 text',
                        color: '#fff',
                    },
                    spot3: {
                        img: 'spot3 img',
                        text: 'spot3 text',
                        color: '#fff',
                    },
                },
                footer: {
                    text: 'slide1 footer',
                    color: '#fff',
                },
            },
            slide2: {
                img: 'slide2/imageURL',
                button: {
                    text: 'slide2 button text',
                    link: 'slide2 button link',
                    color: '#fff',
                },
                headline: {
                    text: 'slide2 headline',
                    color: '#fff',
                },
                spots: {
                    spot1: {
                        img: 'spot1 img',
                        text: 'spot1 text',
                        color: '#fff',
                    },
                    spot2: {
                        img: 'spot2 img',
                        text: 'spot2 text',
                        color: '#fff',
                    },
                    spot3: {
                        img: 'spot3 img',
                        text: 'spot3 text',
                        color: '#fff',
                    },
                },
                footer: {
                    text: 'slide2 footer',
                    color: '#fff',
                },
            },
        },
        sliderAd2: {
            slide1: {
                img: 'slide1/imageURL',
                button: {
                    text: 'slide1 button text',
                    link: 'slide1 button link',
                    color: '#fff',
                },
                headline: {
                    text: 'slide1 headline',
                    color: '#fff',
                },
                spots: {
                    spot1: {
                        img: 'spot1 img',
                        text: 'spot1 text',
                        color: '#fff',
                    },
                    spot2: {
                        img: 'spot2 img',
                        text: 'spot2 text',
                        color: '#fff',
                    },
                    spot3: {
                        img: 'spot3 img',
                        text: 'spot3 text',
                        color: '#fff',
                    },
                },
                footer: {
                    text: 'slide1 footer',
                    color: '#fff',
                },
            },
            slide2: {
                img: 'slide2/imageURL',
                button: {
                    text: 'slide2 button text',
                    link: 'slide2 button link',
                    color: '#fff',
                },
                headline: {
                    text: 'slide2 headline',
                    color: '#fff',
                },
                spots: {
                    spot1: {
                        img: 'spot1 img',
                        text: 'spot1 text',
                        color: '#fff',
                    },
                    spot2: {
                        img: 'spot2 img',
                        text: 'spot2 text',
                        color: '#fff',
                    },
                    spot3: {
                        img: 'spot3 img',
                        text: 'spot3 text',
                        color: '#fff',
                    },
                },
                footer: {
                    text: 'slide2 footer',
                    color: '#fff',
                },
            },
        },
    },
};

目前我能够获得imageAds 或sliderAds，但我无法随机获得他们的子对象。这是我当前的代码：

var properties = Object.getOwnPropertyNames(campaign);
var index = Math.floor(Math.random() * properties.length);
var adType = {};
adType[properties[index]] = campaign[properties[index]];
// output: imageAds or sliderAds object

var properties = Object.getOwnPropertyNames(adType);
var index = Math.floor(Math.random() * properties.length);
var ad = {};
ad[properties[index]] = adType[properties[index]];
// Expected output: imageAd1, imageAd2, sliderAd1 or sliderAd2
// Actual output: imageAds or sliderAds object

console.log(ad);

那么怎么处理呢？

Answer 1

还做了简短的测试，因为 0/1 随机可能不会显示所有选项 ;-)：

function demo (index1, index2) {
    var properties = Object.getOwnPropertyNames(campaign);
    var index = index1 === undefined ? Math.floor(Math.random() * properties.length)
        : index1;
    var adType = campaign[properties[index]];
    console.log(index, properties[index]);

    properties = Object.getOwnPropertyNames(adType);
    index = index2 === undefined ? Math.floor(Math.random() * properties.length)
        : index2;
    var ad = { };
    ad[properties[index]] = adType[properties[index]];
    console.log(index, JSON.stringify(ad).substr(0, 100));
}
function test () {
    console.log('Random:');
    demo(); // random
    console.log('0,0');
    demo(0, 0);
    console.log('1,0');
    demo(1, 0);
    console.log('0,1');
    demo(0, 1);
    console.log('1,1');
    demo(1, 1);
}
var campaign = {
    imageAds: {
        imageAd1: {
            img: 'imageAd1/imageURL',
            button: {
                text: 'imageAd1 button text',
                link: 'imageAd1 button link',
                color: '#fff'
            },
            headline: {
                text: 'imageAd1 headline',
                color: '#fff'
            },
            spots: {
                spot1: {
                    img: 'spot1 img',
                    text: 'spot1 text',
                    color: '#fff'
                },
                spot2: {
                    img: 'spot2 img',
                    text: 'spot2 text',
                    color: '#fff'
                },
                spot3: {
                    img: 'spot3 img',
                    text: 'spot3 text',
                    color: '#fff'
                }
            },
            footer: {
                text: 'imageAd1 footer',
                color: '#fff'
            }
        },
        imageAd2: {
            img: 'imageAd2/imageURL',
            button: {
                text: 'imageAd2 button text',
                link: 'imageAd2 button link',
                color: '#fff'
            },
            headline: {
                text: 'imageAd2 headline',
                color: '#fff'
            },
            spots: {
                spot1: {
                    img: 'spot1 img',
                    text: 'spot1 text',
                    color: '#fff'
                },
                spot2: {
                    img: 'spot2 img',
                    text: 'spot2 text',
                    color: '#fff'
                },
                spot3: {
                    img: 'spot3 img',
                    text: 'spot3 text',
                    color: '#fff'
                }
            },
            footer: {
                text: 'imageAd2 footer',
                color: '#fff'
            }
        }
    },
    sliderAds: {
        sliderAd1: {
            slide1: {
                img: 'slide1/imageURL',
                button: {
                    text: 'slide1 button text',
                    link: 'slide1 button link',
                    color: '#fff'
                },
                headline: {
                    text: 'slide1 headline',
                    color: '#fff'
                },
                spots: {
                    spot1: {
                        img: 'spot1 img',
                        text: 'spot1 text',
                        color: '#fff'
                    },
                    spot2: {
                        img: 'spot2 img',
                        text: 'spot2 text',
                        color: '#fff'
                    },
                    spot3: {
                        img: 'spot3 img',
                        text: 'spot3 text',
                        color: '#fff'
                    }
                },
                footer: {
                    text: 'slide1 footer',
                    color: '#fff'
                }
            },
            slide2: {
                img: 'slide2/imageURL',
                button: {
                    text: 'slide2 button text',
                    link: 'slide2 button link',
                    color: '#fff'
                },
                headline: {
                    text: 'slide2 headline',
                    color: '#fff'
                },
                spots: {
                    spot1: {
                        img: 'spot1 img',
                        text: 'spot1 text',
                        color: '#fff'
                    },
                    spot2: {
                        img: 'spot2 img',
                        text: 'spot2 text',
                        color: '#fff'
                    },
                    spot3: {
                        img: 'spot3 img',
                        text: 'spot3 text',
                        color: '#fff'
                    }
                },
                footer: {
                    text: 'slide2 footer',
                    color: '#fff'
                }
            }
        },
        sliderAd2: {
            slide1: {
                img: 'slide1/imageURL',
                button: {
                    text: 'slide1 button text',
                    link: 'slide1 button link',
                    color: '#fff'
                },
                headline: {
                    text: 'slide1 headline',
                    color: '#fff'
                },
                spots: {
                    spot1: {
                        img: 'spot1 img',
                        text: 'spot1 text',
                        color: '#fff'
                    },
                    spot2: {
                        img: 'spot2 img',
                        text: 'spot2 text',
                        color: '#fff'
                    },
                    spot3: {
                        img: 'spot3 img',
                        text: 'spot3 text',
                        color: '#fff'
                    }
                },
                footer: {
                    text: 'slide1 footer',
                    color: '#fff'
                }
            },
            slide2: {
                img: 'slide2/imageURL',
                button: {
                    text: 'slide2 button text',
                    link: 'slide2 button link',
                    color: '#fff'
                },
                headline: {
                    text: 'slide2 headline',
                    color: '#fff'
                },
                spots: {
                    spot1: {
                        img: 'spot1 img',
                        text: 'spot1 text',
                        color: '#fff'
                    },
                    spot2: {
                        img: 'spot2 img',
                        text: 'spot2 text',
                        color: '#fff'
                    },
                    spot3: {
                        img: 'spot3 img',
                        text: 'spot3 text',
                        color: '#fff'
                    }
                },
                footer: {
                    text: 'slide2 footer',
                    color: '#fff'
                }
            }
        }
    }
};
test();