CODEWITHSUNDEEP
javascriptloopsvue.jsvuejs2v-for
sebastian sledz
sebastian sledz

Reputation: 49

How to use v-for to iterate through elements

After some initial iterations on API response I have 48 objects returned in console as item. I am passing this to Vue data as nameModules.

Iteration code below:

    for (const item of result.application.modules.module.moduleItem) {
    console.log(item)

      let returnedNames = item;
      this.nameModules = returnedNames;
    }

Vue data:

  data: function() {
    return {
      nameModules: []
}
}

When I use v-for like below, I only get the id of the last element plus four empty DIVs

      <div v-for="nameModule in nameModules" :key="nameModule._attributes" class="col-12">
        <h1>{{ nameModule.id }}</h1>
        <p class="no-mar-bot">
          Hier finden Sie alle SGUM- zertifizierten Kurse. Nutzen Sie die Suchfunktionen.
          Details finden Sie in der Auswahl der Treffer.
        </p>
      </div>

I tried many different combination to render the ID of every 48 elements and further the name which is located in array dataField[].value._text, but with no luck. Any help would be great.

This is how it looks in console.

console.log(item) gives 48 objects:

v-for1

I am trying to get the red values of id and _text

v-for1

This is how it renders. There is only id of the last object and empty DIVs.

v-for1

Console returns two Vue warnings

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

and

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

but this not helps me a lot to finalize what I wanted to achieve.

UPDATE

I've got some progress and have the names returned in console as on screen below.

v-for1

I used this code to have it

    for (const item of result.application.modules.module.moduleItem) {
    let returnedNames = item.dataField.value._text;
    this.nameModules = returnedNames;

    }

but still I cannot render it via v-for. When I use below code I have empty div for each element as on screen.

      <div v-for="(nameModule, index) in nameModules" :key="index" class="col-12">
        <h1>{{ nameModule._text }}</h1>
        <p class="no-mar-bot">
          Hier finden Sie alle SGUM- zertifizierten Kurse. Nutzen Sie die Suchfunktionen.
          Details finden Sie in der Auswahl der Treffer.
        </p>
      </div>

v-for1

Upvotes: 0

Views: 1815

Answers (1)

Doug Black
Doug Black

Reputation: 59

You are using an object as your key, which is causing the error. Since the key value is always expected to be a string, every time it sees an object, it will replace the last item in that loop (with the key [object Object], because it is the non-primitive value), and you'll only see one.

If you are expecting to change the items, you make look at using nameModule._attributes.id as your key.

<div v-for="nameModule in nameModules" :key="nameModule._attributes.id" class="col-12">

Just beware that, if you don't have an _attributes attached to one of those modules, it will hide the entire loop.

You could also use the index of the loop:

<div v-for="(nameModule, index) in nameModules" class="col-12">

Using the index is fine as long as you are not interacting with any of the elements in the loop. But, if you are, then it is recommended not to do this.

Upvotes: 4

Related Questions