Получить случайный объект из 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();