javascript - Shuffle object of objects or display randomly elements in Angular 2 in template - Stack Overflow

admin管理员组

文章数量:1300165

I have an object of objects with structure like this:

And I display all images in my template with help of Object.keys

in ponent I have:

this.objectKeys = Object.keys;

in template:

<ul id="thumbnailsList">
  <li *ngFor="let key of objectKeys(newTmp)">
    <img src="{{newTmp[key].url}}">
  </li>
</ul>

For now everything works fine, but I would like to shuffle my images, so each time the page will be refreshed, the images will change their order.

I know, that Objects don't have defined order, so it's not possible to manipulate data in the ponent. I don't want to make an array of it, because an idea of object is quick search through objects (i will have in future thousands of thousands of images and looping trough an array is not good solution in this case, so I'd like to keep object instead of an array)

My question is: what could be possible solution here? Is there any possibility to reorder the images direct in template without touching ponent? Or maybe there is some way to shuffle objects?

I have an object of objects with structure like this:

And I display all images in my template with help of Object.keys

in ponent I have:

this.objectKeys = Object.keys;

in template:

<ul id="thumbnailsList">
  <li *ngFor="let key of objectKeys(newTmp)">
    <img src="{{newTmp[key].url}}">
  </li>
</ul>

For now everything works fine, but I would like to shuffle my images, so each time the page will be refreshed, the images will change their order.

I know, that Objects don't have defined order, so it's not possible to manipulate data in the ponent. I don't want to make an array of it, because an idea of object is quick search through objects (i will have in future thousands of thousands of images and looping trough an array is not good solution in this case, so I'd like to keep object instead of an array)

My question is: what could be possible solution here? Is there any possibility to reorder the images direct in template without touching ponent? Or maybe there is some way to shuffle objects?

• javascript
• angular
• typescript
• javascript-objects

Share Improve this question Follow edited May 26, 2020 at 21:51 user11141611 asked May 18, 2018 at 10:44 Anna FAnna F 1,68344 gold badges2525 silver badges4343 bronze badges 3

• Object.keys returns an array – bugs Commented May 18, 2018 at 10:48
• Please post your structure as plain text, as some people don't have access to imgur because of proxy reasons. – user4676340 Commented May 18, 2018 at 10:51
• You may want to use a library like lodash to more easily deal with collections. shuffle is a monly implemented function in these, among others. – k0pernikus Commented May 18, 2018 at 13:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

You can create a pipe, and include it in the declarations array of the AppModule.

src/app/core/pipes/random-order.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'randomOrder' })
export class RandomOrderPipe implements PipeTransform {
  transform(list: Array<any>): Array<any> {
    const newList = [...list];
    newList.sort(() => Math.random() - 0.5);
    return newList;
  }
}

src/app/app.module.ts

import { RandomOrderPipe } from './core/pipes/random-order.pipe';

@Module({
  declarations: [RandomOrderPipe, ...],
  ...
})

src/app/app.ponent.html

<div>
  <div *ngFor="item in list | randomOrder">
    <!-- -->
  </div>
</div>

To create a shuffling function, you need to work with arrays. What you can do is as you did, getting the keys, but it would be easier and more intuitive to directly use an array.

After all, it represents a list of pictures, so it should not be an object.

The shuffle function can be coded with the help of reduce and splice :

const images = ['dog', 'cat', 'degu', 'mouse', 'snake'];

function shuffle(list) {
  return list.reduce((p, n) => {
    const size = p.length;
    const index = Math.trunc(Math.random() * (size - 1));
    p.splice(index, 0, n);
    return p;
  }, []);
};

console.log(shuffle(images));
console.log(shuffle(images));
console.log(shuffle(images));

You can sort the array returned by object.keys by using a random boolean generator in the sort callback:

this.objectKey = (obj) => {  
    return Object.keys(obj).sort((a, b) => Math.random() >= 0.5);
};

Below, you can see the random sort in action:

var objectKey = (obj) => {  
    return Object.keys(obj).sort((a, b) => Math.random() >= 0.5);
};

var obj = { prop1: '1', prop2: '1', prop2: '1', prop3: '1', prop4: '1', prop5: '1' };

console.log(objectKey(obj));
console.log(objectKey(obj));
console.log(objectKey(obj));
console.log(objectKey(obj));

const images = [{'name':'user01'}, {'name':'user02'}, {'name':'user03'}, {'name':'user04'}, {'name':'user05'}];

function shuffle(list) {
  return list.reduce((p, n) => {
    const size = p.length;
    const index = Math.trunc(Math.random() * (size - 1));
    p.splice(index, 0, n);
    return p;
  }, []);
};

console.log(shuffle(images));
console.log(shuffle(images));
console.log(shuffle(images));

var objectKey = (obj) => {  
    return Object.keys(obj).sort((a, b) => Math.random() >= 0.5);
};

var obj = { prop1: '1', prop2: '1', prop2: '1', prop3: '1', prop4: '1', prop5: '1' };

console.log(objectKey(obj));
console.log(objectKey(obj));
console.log(objectKey(obj));
console.log(objectKey(obj));

本文标签： javascriptShuffle object of objects or display randomly elements in Angular 2 in templateStack Overflow