Trying to iterate over an array of objects, and create a new property that contains an array of words from that sentence's text property

Question

My state contains the following property:

sentences: [
    {
        text: "Go away and hide behind that door where we found you just now.",
        grade: 606
    },
    {
        text: "Please don't let anyone spoil these nice fresh flowers.",
        grade: 609
    },
]

Now I am trying to iterate over the sentences, create a new property on each sentence called words which will be an array of words. When I console.log(this.sentences), I see the new property but when I try to render the property in the DOM, it doesn't show the new property.

    mounted(){
        this.sentences.map((sentence) => {
            const arrayOfWords = sentence.text.split(' ');
            sentence.words = arrayOfWords
        })
        console.log(this.sentences)
    }

@mplungjan Why would storing it in a variable change anything? I'm just trying to mutate the original array. — Onyx, Oct 23 '21 at 20:42
`Array.map()` returns a new array. You need to store it in `this.sentences` — ABDULLOKH MUKHAMMADJONOV, Oct 23 '21 at 20:42
But why is console.log(this.sentences) showing that I've already mutated it and added the array of words to it? — Onyx, Oct 23 '21 at 20:46

score 2 · Accepted Answer · answered Oct 23 '21 at 20:48

Array#map returns:

A new array with each element being the result of the callback function.

Also, you need to add the value computed in each iteration:

Function that is called for every element of arr. Each time callbackFn executes, the returned value is added to newArray.

Therefore, to get the updated version, you need to assign it to this.sentences:

new Vue({
  el: "#app",
  data: () => ({
    sentences: [
      { text: "Go away and hide behind that door where we found you just now.", grade: 606 },
      { text: "Please don't let anyone spoil these nice fresh flowers.", grade: 609 }
    ]
  }),
  mounted(){
    this.sentences = this.sentences.map(sentence => {
      const arrayOfWords = sentence.text.split(' ');
      sentence.words = arrayOfWords
      return sentence;
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(sentence, i) in sentences" :key="i">{{sentence.words}}</div>
</div>

A better way would be creating a computed property to return the list of sentences with the words in them:

new Vue({
  el: "#app",
  data: () => ({
    sentences: [
      { text: "Go away and hide behind that door where we found you just now.", grade: 606 },
      { text: "Please don't let anyone spoil these nice fresh flowers.", grade: 609 }
    ]
  }),
  computed: {
    sentencesWithWords: function() {
      return this.sentences.map(sentence => {
        const arrayOfWords = sentence.text.split(' ');
        sentence.words = arrayOfWords
        return sentence;
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(sentence, i) in sentencesWithWords" :key="i">{{sentence.words}}</div>
</div>

The computed property works but I have no idea why assigning the new array to this.sentences doesn't reflect in the dom for me. console.log(this.sentences) shows the right stuff but when I try to render them in the dom I see the old array — Onyx, Oct 23 '21 at 21:11
@Bobimaru you can share a demo link or update the question if you want more help as I need to check how you're rendering the array. Try comparing your code to the above, but I advise to use the computed property especially if adding the ``words`` is only for UI purposes — Majed Badawi, Oct 23 '21 at 21:15

Trying to iterate over an array of objects, and create a new property that contains an array of words from that sentence's text property

1 Answers1