Displaying Elements of a JSON Array using v-for

I am currently working with an API that stores my Data in JSON format. While I am able to successfully load and display the entire array, I am facing challenges in displaying specific fields.

The array is located in a field:

           peoples: '',
           errors: ''

This is my current approach for displaying the information

  <div id="table">
   <li v-for="people in peoples">
       {{people}}
   </li>

When displayed, it looks like this:

{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5f425b574a565f7a5f425b574a565f14595557">[email protected]</a>", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99c81989489959cb99c81989489959cd79a9694">[email protected]</a>", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd98859c908d9198bd98859c908d9198d39e9290">[email protected]</a>", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5e435a564b575e7b5e435a564b575e15585456">[email protected]</a>", "picture": "", "title": "NULL", "active": 1 } 
{ "username": "example", "firstnames": "ex", "middle": "NULL", "surname": "example", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbdec3dad6cbd7defbdec3dad6cbd7de95d8d4d6">[email protected]</a>", "picture": "", "title": "NULL", "active": 1 }

I have discovered that using {{people[0].username}} will display the value for a single record. However, I am looking for a way to list all usernames (regardless of array size, etc).

For example:

username123
username124
username125
javascriptarraysjsonvue.jsv-for

Answer №1

Is this the right answer? 

<div id="table">
<li v-for="person in peopleList">
 {{person.name}}
 {{person.surname}}
</li>
</div>

Answer №2

Updated code by including .data in this.peoples

.then(response => {
 console.log(JSON.stringify(response.data))
 this.peoples = response.data.data
 })

Changed initialization from peoples:'' to peoples:[]

export default {
data(){
    return{
        peoples: [],
        errors: ''
    }
},

Lastly, update the following code: 

      <li v-for="people in peoples">
      {{people.username}}
      {{people.firstnames}}
      </li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript utilizes regex patterns to modify the value located between the characters within an input's name attribute

Can anyone assist me in creating a unique regex pattern to extract specific characters from the attribute values of HTML inputs? I'm dynamically cloning select elements and input text with button clicks, so I need to maintain the attribute name synta ...

javascriptjqueryregexjson

What is the best way to manage files in Vue.js?

I am faced with a challenge in storing image files and video files as Blob data. One thing I like is that the uploaded video and image files display instantly, which is pretty cool. I'm not entirely sure if the code below is correct - how can I navi ...

javascriptlaravelvue.js

Drop and drag the spotlight

On my website, I am looking to implement a feature that will make it easier for users to identify the drag and drop area. I found a code snippet on JSFIDDLE that works perfectly there. However, when I tried to use it on my local server, it doesn't se ...

javascriptjqueryhtmlcss

The CSS files are not loading automatically in my React application using Vite

I am facing an issue with importing css and js files into a view in React using vite. The styles are not loading properly, and I have to keep commenting and uncommenting the imports in my code for them to be recognized when entering the view. Below is a s ...

javascriptcssreactjstypescript

ReactJS does not recognize the library mentioned

click here to access the pondjs folder inside node-modulesAfter installing pondjs(https://www.npmjs.com/package/pondjs) using npm install pondjs --save in my react application and confirming its presence in package.json, I encountered an issue in App.js. W ...

javascriptreactjscreate-react-app

I am struggling to make php redirect work using onclick() function

My PHP button is not redirecting properly. Assuming the page destination is correct, is there anything else that could be causing this issue? echo "<button id=\"create\" onclick=\"location.href('/team/teams.php?op=create');&bso ...

javascriptphphtmlredirectonclick

Printing keys of objects in an array in AngularJS through iteration

Here is an array of objects that I am attempting to iterate in ng-repeat and print keys, but I am facing some challenges. $scope.directivesInfo = [ {"ngRepeat": {"enter": true, "leave": true, "move": true, "add": false, "remove": false}}, {"ngView ...

javascriptarraysangularjs

Utilizing JQuery to request a file input and subsequently handle its processing

I am working towards creating a functionality where users can click a button, select a file, and have the program perform actions on that file, such as sending it through an AJAX request for processing. Currently, I have set up a hidden form along with a b ...

javascriptjquery

The Quirks of jQuery's .load() Method

On my website, I am incorporating a basic jQuery script to load content from one part of a webpage into the 'display container' on the same page. The content being loaded consists of multiple divs enclosed within an outer <div> that is hid ...

javascriptjqueryhtmlcssajax

How can I merge an array of objects in lodash?

I am facing a challenge with merging an array of objects in JavaScript. My goal is to combine them into a single object using either a JS library or lodash. Here is how my array looks: [{ 2017: { a: "100", b: "200" ...

javascriptjsondata-structureslodash

What is the best way to assign an object variable within an array state?

My current state looks like this: const [tags, setTags] = useState([{id: 1, label: "random"}, {id: 2, label: "important"}]) const [input, setInput] = useState("") const [selectedTag, setSelectedTag] = useState([]) In addition ...

javascriptreactjsreact-typescript

tips and tricks for adding content to json with the help of jquery/javascript

Is it possible to include text in a JSON array using jQuery or Javascript? Assuming that there is data in the following format: A list of numerical codes stored in a text file as 123, 456, 789 I am looking to convert them into a JSON array using JavaScr ...

javascriptjqueryjson

Generating a package.json file that includes a comprehensive list of all development dependencies

My Inquiry I've been pondering whether it's possible to include all the necessary devDependencies within the package.json file generated by running npm init in the Terminal for Gulp projects. Can these dependencies be pre-listed in the file inst ...

jsonnode.jsterminalnpmgulp

Is it possible to display a thumbnail image in a separate full-sized window by using CSS or JavaScript?

I am currently utilizing a program called WebWorks 2020.1 that automatically creates <img> tags from my FrameMaker source input when published to DHTML. Unfortunately, I do not have the ability to directly modify the HTML <img> or <a> tag ...

javascripthtmlcssimage

What is the syntax for implementing an if-else statement?

Just starting with algolia and looking for a hit template. Please take a look at the script below for the text/html template needed: <script type="text/html" id="hit-template"> <div class="hit"> <div class="hit-image"> <i ...

javascriptphphtml

How can JSON-loaded scripts be executed using jQuery?

I received a file with the following content: {'html' : '<div id="bla">something</div>', 'script' : ' $().ready(function() { /* some code */});' } I want to use jQuery to load this file and execute the ...

jqueryajaxjsongetscript

Setting up Redis for session store in the right way involves a few key steps

I have been attempting to configure Redis Store in the following manner: var express = require('express'); var app = express(); ....... ....... var session = require('express-session'); var redis = require("redis").createClient(); var ...

javascriptnode.jsexpressredis

What is the significance of a.{X} in the OCaml programming language?

I'm in the process of converting some OCaml to F#. I'm diving headfirst into the world of OCaml and my F# skills are a bit rusty. The OCaml code compiles without any issues in the OCaml compiler, but unsurprisingly throws a bunch of errors in th ...

arrayssyntaxf#ocaml

Is there a way to update specific content within a view in express.js without having to re-render the entire view?

I'm in the process of creating a calendar that allows users to click on dates, triggering a popup window displaying events for that specific date. The challenge lies in not knowing which date the user will click on prior to rendering, making it diffic ...

javascriptnode.jsexpress

The JSON data lacks compatibility with the usage of track by functionality

I am working on a project that involves three connected select menus. The first one displays series names, the second one displays chapter numbers belonging to the series selected in the first menu, and the third one displays page numbers belonging to t ...

javascriptjsonangularjs