0

In the below code:

1.Initially aura component contains the init which then calls the DoInit in the controller.

2.Then from the controller we are calling the helper file to get a list of Randomized array.

3.In the helper filer we have a wordGenerator function which generates array of words of mentioned size then there is a method to randomize the position of words inside the array. Finally, we have winWordGenerator which randomly selects a random word from the array of the randomWords.

4.Finally, after everything I am trying to display the array of random words and win word in the component.

Issue: Win word is displayed but the list random words is not displayed. Please refer the below screenshot for reference:

enter image description here

Please let me know on why I am not able to display the list of random words?

Aura Component:

<aura:component implements="flexipage:availableForAllPageTypes">
  <aura:handler name="init" value="{!this}" action="{!c.DoInit}" />
  <aura:attribute name="Words" type="List" />
  <aura:attribute name="WinWord" type="String" />
  <lightning:card>
    <div>Random words are: {!v.Words} Winning word is : {!v.WinWord}</div>
  </lightning:card>
</aura:component>

Aura controller:

({
  DoInit: function (component, event, helper) {
    console.log("Init has been called");
    let numberOfArrayElements = 7;
    let recievedWords = helper.wordGenerator(numberOfArrayElements);
    component.set("v.Words", recievedWords);
    let recievedWinWord = helper.winWordGenerator(recievedWords);
    component.set("v.WinWord", recievedWinWord);
  }
});

Aura Helper file:

({
  wordGenerator: function (numb) {
    let words = [
      "sample1",
      "sample2",
      "sample3",
      "sample4",
      "sample5",
      "sample6",
      "sample7",
      "sample8",
      "sample9",
      "sample10",
      "sample11",
      "sample12",
      "sample13",
      "sample14",
      "sample15"
    ];
    let slicedWords = words.slice(0, numb);
    console.log("The array requested is :" + slicedWords);

    //Here we are selecting on of the words from the array as win word
    let winWord = this.winWordGenerator(slicedWords);
    console.log("Win Word is : " + winWord);

    //Were randomizing the entire sliced array
    let randomWords = this.randomizeWordsGenerator(slicedWords);
    console.log("Randomized words are : " + randomWords);

    return randomWords;
  },

  randomizeWordsGenerator: function (wordsArray1) {
    let wordsArray = wordsArray1;
    for (let i = 0; i < wordsArray.length; i++) {
      let randomNumber = Math.floor(Math.random() * wordsArray.length);
      let temp = wordsArray[randomNumber];
      wordsArray[randomNumber] = wordsArray[i];
      wordsArray[i] = temp;
    }
    return wordsArray;
  },

  winWordGenerator: function (wordsArray1) {
    let randomNumber = Math.floor(Math.random() * wordsArray1.length);
    return wordsArray1[randomNumber];
  }
});

1 Answer 1

1

You can't just output an array that way. You need to either iterate over the elements, such as:

<aura:iteration items="{!v.Words}" var="word">
  {!word}
</aura:iteration>

Or you need to make them into a string, as in:

    component.set("v.Words", recievedWords.join(", "));

In which case, the attribute should be a string.

  <aura:attribute name="Words" type="String" />
2
  • I think in your last line you wanted to write type="String" ;-) Mar 7 at 13:14
  • @FelixvanHove Yep, I did. I thought I did. :D I'm still pre-coffee this morning.
    – sfdcfox
    Mar 7 at 13:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .