我正尝试向用户显示随机横幅。我有两种广告，图片广告和滑块广告。我想随机选择其中一个，然后再从先前选择的广告类型中随机选择一个。因此，我想随机获取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);
那么如何处理呢？
答案 0 :(得分：0)
也作简短测试，因为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();