how to iterate over objects id value ? in vue js - arrays

Question

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...

Answer 1

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

Answer 2

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>