Reputation: 49
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:
I am trying to get the red values of id
and _text
This is how it renders. There is only id
of the last object and empty DIVs.
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.
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>
Upvotes: 0
Views: 1815
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