[Vuejs]-How to iterate over objects id value ? in vue js

by

0👍

✅

So you want to find an object by its id from an array, then you can use find() on dataList

dataList.find(item => item.id === 321).title
dataList.find(item => item.id === 321).author.name
dataList.find(item => item.id === 321).author.title

0👍

I might be misreading this question, but I think you’re talking about using object properties?

If so, just copy the lines used for displaying the other object properties

     <img :src="`{{ dataList[0].logo_url}}`">  </img>
     <h6> {{ dataList[0].title }} </h6>
     <h6> ID: {{ dataList[0].id }} </h6>
     <!-- <p v-html="dataList[0].blog_entry"> </p> -->
     <hr>
     <p> {{ dataList[0].author.name }} </p>
     <p> {{ dataList[0].author.title}} </p>

For iterating across the full dataList Use v-for

  <div v-for="entry in dataList" key="entry.id" class="Fgrid">

 <!-- single news Block for data-->
<a
   v-bind:key="entry.id"
   :href="`posts/${entry.id}`"
   class="Gmodule"
   style="display:flex;text-decoration:none;color:#14a0fd;"
   >
   <div>
   <!-- <img  src="https://fintechapp.s3.us-east-2.amazonaws.com/y2qYjf8e2hp8z5yrgyfxF2NN?response-content-disposition=inline%3B%20filename%3D%22BoxLogo.png%22%3B%20filename%2A%3DUTF-8%27%27BoxLogo.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJG6DG75G7BXQ3XUA%2F20210115%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20210115T192217Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=26b742c676a7fc0854c1efa0c81bf60e9239bc5068606262b3b1eab0f7a21245">
   -->
     <img :src="`{{ entry.logo_url}}`">  </img>
     <h6> {{ entry.title }} </h6>
     <!-- <p v-html="entry.blog_entry"> </p> -->
     <hr>
     <p> {{ entry.author.name }} </p>
     <p> {{ entry.author.title}} </p>
    </div>
</a>
<!-- single news Block for data  END-->
  </div>

Leave a comment