使用lodash随机播放并限制在视图上显示

时间:2017-09-01 17:56:55

标签: javascript arrays json typescript ionic-framework

我用这个Shuffle method来改变我的问题。我在console.log();上得到了洗牌后的值,但它仍然显示我的问题列表从1到50开始没有洗牌,在我的视图中不限于10。

ionViewDidLoad() {
this.slides.lockSwipes(true);
this.dataService.load().then((data) => {
  data.map((question) => {
    console.log(_.shuffle(data));
    if (data.length > 10) data.length = 10;
    data.forEach(question => _.shuffle(question.answers));
    return question;
  });
  this.questions = data;
});}

这是在我的console.log(); enter image description here

在我的question.json文件上(我只展示了几个以便不占用我问题的整个空间)

{
"questions": [
    {
        "flashCardFront": "<img src='assets/images/animals.png'/>",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "These breathe, feed, grow, and leave offspring.",
        "answers": [
            {"answer": "Non-living Things", "correct": false, "selected": false},
            {"answer": "Living Things", "correct": true, "selected": false},
            {"answer": "None of the above", "correct": false, "selected": false}
        ]
    },
     {
        "flashCardFront": "<img src='assets/images/universe.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "It is the only world that supports life.",
        "answers": [
            {"answer": "Mars", "correct": false, "selected": false},
            {"answer": "Universe", "correct": false, "selected": false},
            {"answer": "Earth", "correct": true, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "It was a water world with small areas of dry land",
        "answers": [
            {"answer": "Old Earth", "correct": false, "selected": false},
            {"answer": "Young Earth", "correct": false, "selected": false},
            {"answer": "Earth", "correct": true, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "According to studies of ancient rocks, life began on Earth about how many years ago?",
        "answers": [
            {"answer": "5 million years", "correct": false, "selected": false},
            {"answer": "3300 million years", "correct": false, "selected": false},
            {"answer": "3800 million years", "correct": true, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/animals.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "They range from the simplest single-celled bacteria to plants, animals, and humans.",
        "answers": [
            {"answer": "Living things", "correct": true, "selected": false},
            {"answer": "Non-living things", "correct": false, "selected": false},
            {"answer": "Cells", "correct": false, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "Comets and meteors rained down on what planet?",
        "answers": [
            {"answer": "Earth", "correct": true, "selected": false},
            {"answer": "Jupiter", "correct": false, "selected": false},
            {"answer": "Venus", "correct": false, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "Many scientists believe that life began here.",
        "answers": [
            {"answer": "Lakes and oceans", "correct": true, "selected": false},
            {"answer": "Planet Earth", "correct": false, "selected": false},
            {"answer": "Rivers and mountains", "correct": false, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "These are energy that came from hot springs on the seabed.",
        "answers": [
            {"answer": "Black Matter", "correct": false, "selected": false},
            {"answer": "Black Smokers", "correct": true, "selected": false},
            {"answer": "Molecular Deposit", "correct": false, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "It is the theory of the beginning of the universe.",
        "answers": [
            {"answer": "The Big Boom Theory", "correct": false, "selected": false},
            {"answer": "The Big Bang Theory", "correct": true, "selected": false},
            {"answer": "The Beginning Theory", "correct": false, "selected": false}
        ]
    }
    ,
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "Astronomers believe that the universe began how many years ago?",
        "answers": [
            {"answer": "16 billion years", "correct": false, "selected": false},
            {"answer": "14 million years", "correct": false, "selected": false},
            {"answer": "14 billion years", "correct": true, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "These are stable particles that started to form when the universe was one second old.",
        "answers": [
            {"answer": "Protons and electrons", "correct": false, "selected": false},
            {"answer": "Protons and neutrons", "correct": true, "selected": false},
            {"answer": "Neutrons and electrons", "correct": false, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "These two opposite types of particles largely destroyed each other.",
        "answers": [
            {"answer": "Matter and antimatter", "correct": true, "selected": false},
            {"answer": "Matter and non-matter", "correct": false, "selected": false},
            {"answer": "Protons and matter", "correct": false, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "The universe cooled to how many degrees after the formation of hydrogen and helium nuclei.",
        "answers": [
            {"answer": "30000 degrees", "correct": false, "selected": false},
            {"answer": "3000 degrees", "correct": true, "selected": false},
            {"answer": "33000 degrees", "correct": false, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "The universe was filled with clouds of what gases?",
        "answers": [
            {"answer": "Helium and nitrogen gases", "correct": false, "selected": false},
            {"answer": "Nitrogen and hydrogen gases", "correct": false, "selected": false},
            {"answer": "Hydrogen and helium gases", "correct": true, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "Together with ground-based telescopes, these telescopes are now beginning to find galaxies that were created about one billion years after the Big Bang.",
        "answers": [
            {"answer": "The Bubble Base Telescope", "correct": false, "selected": false},
            {"answer": "The Hubble Spectacle Telescope", "correct": false, "selected": false},
            {"answer": "The Hubble Space Telescope", "correct": true, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "This begins about 100 km above the Earth, where the shell of air around our planet disappears.",
        "answers": [
            {"answer": "Atmosphere", "correct": false, "selected": false},
            {"answer": "Outer Space", "correct": true, "selected": false},
            {"answer": "Ionoshpere", "correct": false, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "The visible universe is at least how many light years across?",
        "answers": [
            {"answer": "95 billion light years", "correct": false, "selected": false},
            {"answer": "89 million light years", "correct": false, "selected": false},
            {"answer": "93 billion light years", "correct": true, "selected": false}
        ]
    },
    {
        "flashCardFront": "<img src='assets/images/earth.png' />",
        "flashCardBack": "",
        "flashCardFlipped": false,
        "questionText": "These are considered the strongest objects in the Universe.",
        "answers": [
            {"answer": "Supernovae", "correct": false, "selected": false},
            {"answer": "Black holes", "correct": true, "selected": false},
            {"answer": "Gravitational fields", "correct": false, "selected": false}
        ]
    }
]

}

1 个答案:

答案 0 :(得分:0)

Lodash的_shuffle方法是非变异的。如果你想呈现混洗数组,可以将它移植到你呈现它的位置,或者将你的数组克隆为旧数组的新的混乱版本。

请注意这里发生的事情:

var x = [1, 2, 3, 4]
undefined
_.shuffle(x)
(4) [4, 3, 2, 1]
x
(4) [1, 2, 3, 4]