Shuffle object of objects or display randomly elements in Angular 2 in template

Question

I have an object of objects with structure like this:

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

in component 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 component. 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 component? Or maybe there is some way to shuffle objects?

Answer 1

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.component.html

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

Answer 2

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));

Answer 3

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));

Answer 4

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));