[FIXED] how to iterate over objects id value ? in vue js

Issue

I have a data JSON file locally where I can get the data into a component and print the object value depending on the object array number starting from 0 and on ... how can I print it using the object's id value?

in resolution as an example id=321 I want to print that object.

here is my current working code printing by object array value:

<template>
  <div class="exespotbody">
    <center><h2> Stories Spotlight </h2></center><br>
  <div class="Fgrid">

 <!-- single news Block for data-->
<a
   v-bind:key="dataList[0].id"
   :href="`posts/${dataList[0].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="`{{ dataList[0].logo_url}}`">  </img>
     <h6> {{ dataList[0].title }} </h6>
     <!-- <p v-html="dataList[0].blog_entry"> </p> -->
     <hr>
     <p> {{ dataList[0].author.name }} </p>
     <p> {{ dataList[0].author.title}} </p>
    </div>
</a>
<!-- single news Block for data  END-->
  </div>

  </div>
</template>

<script>
import dataData from "@/data/data.json";
export default {
  name: 'StoriesSpotlight',
  data() {
    return {
      dataList: dataData,
    }
  }
}
</script>

the result on screen :

Here is a is Vue tools pic for data:

what I want to do is print the data of the object bind by the id of the object for example id=321 that would be my next step...

Solution

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

Answered By - Anurat Chapanond

Answer Checked By - David Marino (PHPFixing Volunteer)