Angular shuffle array elements of two ngFor loops

Question

i am try to build Angular project , i have tow different API news sources . l want to display the tow API news as randomly like :

element news 1
element news 2
element news 1
element news 2

But what i have in my code below is

element news 1 loop
element news 2 loop

news.ts

 news_one_array:any
 news_tow_array:any

ngOnInit() {

this.news_one()
this.news_tow()
}


async news_one() {
    this.http.get("/nodes/25/iq/0/20/xlarge")
      .pipe(timeout(5000),
        catchError(err => {
          console.log(err)
          return Observable.throw("Timeout has occurred");
        })).subscribe(data => {

          this.news_one_array = data
        })

  }

  async news_tow() {
    this.http.get("/nodes/25/iq/0/21/xlarge")
      .pipe(timeout(5000),
        catchError(err => {
          console.log(err)
          return Observable.throw("Timeout has occurred");
        })).subscribe(data => {

          this.news_tow_array = data
        })

  }

HTML :

// *ngfor news 1 

<div *ngFor="let items of news_one_array; let i=index">
<p>{{items.title}}</p>
</div>

// *ngfor news 2 
<div *ngFor="let items of news_tow_array; let i=index">
<p>{{items.title}}</p>
</div>

output :

Aakash Garg · Answer 1 · 2020-05-30T19:18:58.193

0

Have only one ngFor loop in your template on new array formed below :-

make a new array of both news like :-

public newArray = [];

    async news_one() {
        this.http.get("/nodes/25/iq/0/20/xlarge")
          .pipe(timeout(5000),
            catchError(err => {
              console.log(err)
              return Observable.throw("Timeout has occurred");
            })).subscribe(data => {

              this.news_one_array = data
              this.newsArray = [...this.news_one_arraynewsArray, ...data];
              //shuffle array here
            })

      }

      async news_tow() {
        this.http.get("/nodes/25/iq/0/21/xlarge")
          .pipe(timeout(5000),
            catchError(err => {
              console.log(err)
              return Observable.throw("Timeout has occurred");
            })).subscribe(data => {

              this.news_tow_array = data
              this.newsArray = [...this.news_one_array];newsArray, ...data];
              //shuffle array here
            })

      }

then shuffle this array. To know how to shuffle a array. find method on link below :-

How to randomize (shuffle) a JavaScript array?

Picked up shuffle function from above link :-

public shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

Should be used like

this.newsArray = this.shuffle(this.newsArray);

edited May 30 '20 at 19:18

answered May 30 '20 at 16:48

Aakash Garg

10,649
2
7
25

`ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'concat' of undefined` – Ali Ghassan May 30 '20 at 17:36
how and where you are concatinating? – Aakash Garg May 30 '20 at 17:37
` ` ngOnInit() { this.newsArray = [...this.news, ...this.data,...this.body]; this.newsArray.sort(() => Math.random() - 0.5); }` – Ali Ghassan May 30 '20 at 17:38
till then these arrays was undefined, let me put whole code for you above to create new array. – Aakash Garg May 30 '20 at 17:43
what about htm ngfor ? should i use the newsArray ? for loop ? – Ali Ghassan May 30 '20 at 17:49
yes, should use newsArray and one ngfor only. assuming you have called shuffle where i mentioned in comments. – Aakash Garg May 30 '20 at 17:50
also there are a lot of answers in your linke above . which on is working for me ? – Ali Ghassan May 30 '20 at 17:50
i was adjust my code according to newsArray . unfortunately i get same result . all array of news source then all array of news 2 . the code above doesn't showing element news 1 then element news 2 then element news 1 – Ali Ghassan May 30 '20 at 18:20
do you have anydesk ? – Ali Ghassan May 30 '20 at 18:21
You called shuffle method where i have comment to shuffle? – Aakash Garg May 30 '20 at 18:27
yes i put it inside `ngOnInit() { this.newsArray = this.shuffle(this.newsArray);}` – Ali Ghassan May 30 '20 at 18:29
you always want order new1 news2 news1 news 2? – Aakash Garg May 30 '20 at 18:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/214997/discussion-between-ali-ghassan-and-aakash-garg). – Ali Ghassan May 30 '20 at 18:43

score 0 · Answer 2 · answered May 30 '20 at 16:59

You can use map function to combine two arrays into a single array of objects as follows.

    listA = [1, 2, 3 , 4];
    listB = ['a', 'b', 'c']
    this.combined = this.listA.map((x, i)=> {
          return {"a": x, "b": this.listB[i]}
    } );

And then use it in the html. For uneven arrays, use *ngIf to check null/undefined.

<div *ngFor="let item of combined">  
    {{item.a}}
    {{item.b}}
</div>

Angular shuffle array elements of two ngFor loops

2 Answers2