Search code examples
jsonvue.jsobjectiterationv-for

How can i print 1 object using v-for fetching a local json file

In the above exercise, I have a working v-for loop that prints all of the JSON objects in my JSON file, I am trying to only print the first object instead of the whole list... is there a way?

  • I could not find an answer on google

here is my code:

<template>
  <div class="exespotbody">
  <div class="grid">

    <a v-for="(news,key,index) in news " v-bind:key="news" href="" class="module" 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">
        <p> {{ news.description }} </p>
      </div>
    </a>

  <!--  <a class="module" style="display:flex;text-decoration:none;color:#14a0fd; ">
      <div>
        <img style="height:auto ;width:220px;" src="https://filesforfintech.s3.amazonaws.com/images/pig+sauce/1+Go+to+conference.png">
        <p> Events</p>
      </div>
    </a> -->
  </div>

  </div>
</template>

<script>
import newsData from "@/static/news.json"
export default {
  data() {
    return {
      news: newsData,
    }
  }
}
</script>

is there a secrete I don't know?...

Json file structure example:

[{"id":4768,"url":"https://techcrunch.com/2021/01/06/indonesian-robo-advisor-app-bibit-raises-30-million-led-by-sequoia-capital-india/","user_id":48,"restype":"PersonalFinance","description":"Bibit, a Jakarta-based robo-advisor app that wants to make investing more accessible in Indonesia, has raised $30 million from Sequoia Capital India, with participation from returning investors East Ventures, EV Growth, AC Ventures and 500 Startups. – TechCrunch (Catherine Shu)","rating":3,"published_on":"2021-01-06","auth":"","folder":"wealthtech","created_at":"2021-01-07T01:25:41.870-07:00","updated_at":"2021-01-07T01:26:04.530-07:00","header":"Indonesian robo-advisor app Bibit raises $30 million led by Sequoia Capital India","publication":"TechCrunch","sector":"","sector2":"","sector3":"","company_id":2331,"tag_list":[],"company":{"name":"Bibit"}},{"id":4769,"url":"https://www.prnewswire.com/news-releases/leading-commercial-pc-insurance-software-provider-groundspeed-analytics-attracts-investment-from-global-investors-insight-partners-and-oak-hcft-301201761.html","user_id":48,"restype":"General","description":"Groundspeed Analytics, the Ann Arbor, Michigan-based commercial P\u0026C insurance software provider, has raised a Series C investment from Insight Partners with participation from existing investor Oak HC/FT. – PR Newswire","rating":1,"published_on":"2021-01-06","auth":"","folder":"insurtech","created_at":"2021-01-07T01:33:49.371-07:00","updated_at":"2021-01-07T01:34:26.301-07:00","header":"Leading Commercial P\u0026C Insurance Software Provider Groundspeed Analytics Attracts Investment from Global Investors Insight Partners and Oak HC/FT","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2332,"tag_list":[],"company":{"name":"Groundspeed Analytics"}},{"id":4770,"url":"https://www.vccircle.com/ian-leads-pre-series-a-funding-in-fintech-startup-zerone/","user_id":48,"restype":"General","description":"Zerone Microsystems, a New Delhi-based provider of an app that converts any smartphone into a payment terminal, has raised $1.3 million in a pre-Series A round, led by Indian Angel Network (IAN) with participation from IAN Fund and The Chennai Angels (TCA). – VCCircle (Joseph Rai)","rating":3,"published_on":"2021-01-05","auth":"","folder":"payments","created_at":"2021-01-07T02:26:03.980-07:00","updated_at":"2021-01-07T02:26:21.340-07:00","header":"IAN leads pre-Series A funding in fintech startup Zerone","publication":"VCCircle (Joseph Rai)","sector":"","sector2":"","sector3":"","company_id":2333,"tag_list":[],"company":{"name":"Zerone Microsystems"}},{"id":4757,"url":"https://www.prnewswire.com/news-releases/color-announces-167-million-in-series-d-financing-to-help-build-public-health-infrastructure-across-the-us-301200310.html","user_id":48,"restype":"WealthTech","description":"Color, a San Francisco-based startup that is building public health technology and infrastructure for governments, employers, and other institutions that serve large populations, has raised a $167 million Series D financing round, led by General Catalyst and funds and accounts advised by T. Rowe Price Associates, Inc., with participation from Viking Global Investors and others, which brings Color to $278 million in total financing, with a valuation of $1.5 billion. – PR Newswire","rating":1,"published_on":"2021-01-05","auth":"","folder":"insurtech","created_at":"2021-01-05T02:39:51.724-07:00","updated_at":"2021-01-05T03:11:39.856-07:00","header":"Color announces $167 million in Series D financing to help build public health infrastructure across the U.S.","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2321,"tag_list":[],"company":{"name":"Color"}},{"id":4762,"url":"https://www.uktech.news/news/ondato-funding-expansion-plans-20201231","user_id":null,"restype":"CyberIdentity","description":"Ondato, the Lithuanian identity verification company, has scored $2m in seed capital from Startup Wise Guys and OTB Ventures. The company will be moving its headquarters to London. – UKTN","rating":null,"published_on":"2021-01-05","auth":null,"folder":"regtech","created_at":"2021-01-05T22:25:57.091-07:00","updated_at":"2021-01-05T22:25:57.091-07:00","header":"This is the first tech startup that moved to London after Brexit","publication":"UKTN","sector":null,"sector2":null,"sector3":null,"company_id":1436,"tag_list":[],"company":{"name":"Ondat0"}},{"id":4755,"url":"https://www.prnewswire.com/news-releases/paid-network-raises-2m-in-funding-led-by-alphabit-fund-and-master-ventures-301200249.html","user_id":48,"restype":"Lending","description":"PAID Network, a Toronto-based startup building a decentralized SMART Agreement DApp powered by Polkadot, has closed a $2 million funding round led by Alphabit Fund \u0026 Master Ventures, with participation from A195, AU21, Brilliance Ventures, Phoenix VC, and X21. – PR Newswire","rating":2,"published_on":"2021-01-04","auth":"","folder":"blockchain","created_at":"2021-01-05T02:11:06.437-07:00","updated_at":"2021-01-05T02:11:51.658-07:00","header":"PAID Network Raises $2M in Funding Led by Alphabit Fund and Master Ventures","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2319,"tag_list":[],"company":{"name":"PAID Network"}}, ... etc

Result:

enter image description here

Solution

  • So as per you data structure your code should be something like

    <template>
  <div class="exespotbody">
  <div class="grid">
   <!-- Block to print the whole newsList -->
    <a v-for="(news,index) in newsList" v-bind:key="news.id" href="" class="module" style="display:flex;text-decoration:none;color:#14a0fd;"> // Change added in v-for
      <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">
        <p> {{ news.description }} </p>
      </div>
    </a>
  <!-- End of whole newsList -->

 <!-- single news Block -->
   <a v-bind:key="newsList[0].id" href="" class="module" style="display:flex;text-decoration:none;color:#14a0fd;"> // Change added in v-for
      <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">
        <p> {{ newsList[0].description }} </p>
      </div>
    </a>
    <!-- End of single news Block -->

  <!--  <a class="module" style="display:flex;text-decoration:none;color:#14a0fd; ">
      <div>
        <img style="height:auto ;width:220px;" src="https://filesforfintech.s3.amazonaws.com/images/pig+sauce/1+Go+to+conference.png">
        <p> Events</p>
      </div>
    </a> -->
  </div>

  </div>
</template>

<script>
import newsData from "@/static/news.json"
export default {
  data() {
    return {
      newsList: newsData, // change added - to avoid ambiguity in v-for
    }
  }
}
</script>

    Since your data structure is an array of objects in v-for while iterating you wont be able to key since its an array thats the reason why I have removed the key.