Unable to receive data in an array with Vuejs

Here is the code snippet I am working with:

let data = res.data.data;

console.log('data: ', data)

const list = [];
for(let i = 0; i < data.length; i++){
    console.log('data i: ', data[i]) //this line is not being printed in the console
    list.push({
        lat: data[i].latitude,
        lng: data[i].longitude,
        histories: data[i].histories,
    })

    lineString.pushPoint({
        lat:data[i].longitude, 
        lng:data[i].latitude
    })
}
console.log('list: ', list)

The above code returns the following results:

https://i.sstatic.net/3PFPI.png

Even though my data variable contains all the results, nothing seems to be pushed into the list array.

What could be causing the filtered data not to go into the list array?

Answer №1

https://i.sstatic.net/DhDgn.png

Your data is not an array, it's an object, so you'll need to loop over the object. The curly brace, highlighted in blue on the image, indicates that it's an object.

for(let prop in data){
   if(prop == "histories") continue;
   list.push({
      lat: data[prop].latitude,
      lng: data[prop].longitude,
      histories: data["histories"]
   })
}

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

Issue encountered while implementing search functionality with pagination in Laravel using Vue.js and Inertia

Recently, I have embarked on my journey to learn Laravel 8 along with vuejs and inertiajs. My current challenge involves creating a pagination search table. Despite diligently following tutorials, I keep encountering errors. Below is the code snippet for ...

JavaScript guide: Deleting query string arrays from a URL

Currently facing an issue when trying to remove query string arrays from the URL. The URL in question looks like this - In Chrome, it appears as follows - Var url = "http://mywebsite.com/innovation?agenda%5B%5D=4995&agenda%5B%5D=4993#ideaResult"; ...

What causes the JavaScript code to output the number 3?

What is the reason behind the output a == 3 in this code snippet? var x = "abc"; var y = 3; var z = "xyz"; var a = x && y || z; Here is the link to interact with the code: http://jsfiddle.net/thinkingmedia/qBZAL/ One might assume that a == true ...

Using Typescript to mute audio elements within HTML documents

I have a scenario where I want to mute audio that automatically plays when the screen loads. In order to achieve this, I am attempting to add a button that can toggle the audio mute functionality using Typescript within an Angular4 application. The code sn ...

Exploring through a table using JavaScript

I am struggling to search a table within my HTML for a specific term. The code I have works to an extent, but it does not account for alternatives such as searching for "what is that" when I type in "What is that". Additionally, I need the script to ignor ...

State management in GraphQL and ReactJS

When working with fetching data from a server, I utilize the ApolloProvider as a Higher Order Component (HOC) and the Query component from 'react-apollo' to display the data on pages and in components. However, an issue arises when the <Query ...

Unlimited scrolling feature resembling Facebook and Tumblr created using jQuery

Below is the modified code from a tutorial found on hycus.com: <script type="text/javascript> var properlast = 10; $(window).scroll(function() { if($(window).scrollTop() == $(document).height() - $(window).height()) { $("div#load ...

Clear a variable that was sent through the post method in an ajax call

Within my JavaScript file, I have the following Ajax code: // Default settings for Ajax requests $.ajaxSetup({ type: 'POST', url: path + '/relay.php' + '?curr=' + currency + "&ver=" + Ma ...

Unable to target a dynamic div and utilize solely its image

Can someone provide some assistance with a jQuery issue I am facing? I have a lengthy list of images directly uploaded from YouTube, each image has the same "v-code" as its corresponding video. To simplify the downloading process for all videos on one page ...

Using Node.js, is there a way to divide an object's array property by 100 and then store each portion in individual files?

Looking to break down a large object into chunks of 100 and save each chunk in separate files using Node.js. However, struggling to figure out how to split an array with thousands of records into files of 100. Query: How can I divide an object's arr ...

Ways to address time discrepancies when the countdown skips ahead with each button click (or initiate a countdown reset upon each click)

Every time I click my countdown button, the timer runs normally once. But if I keep clicking it multiple times, it starts skipping time. Here are my codes: <input type="submit" value="Countdown" id="countdown" onclick="countdown_init()" /> <div i ...

Adjust the width of a div element based on a data property in Vue using animations

I am currently working on a progress bar div that has its width tied to a data property called "result" and adjusts accordingly. However, the transition is still abrupt and I would like to add some animation to it. I have considered using CSS variables o ...

Typescript Error: TS2339: The property 'faillogout' is not found within the type '{ failed(): void; onSubmit(): void; }'

I encountered an issue with my Vue.js app using TypeScript. The error message I'm getting is: Property 'faillogout' does not exist on type '{ failed(): void; onSubmit(): void; }'. 101 | failed () { This snippet shows the s ...

Enhancing the Calculator Functionality in a React Program

I'm struggling to incorporate a reset button into the input field, similar to CE on a calculator. I'm facing challenges when it comes to integrating it within the existing code structure. import { useRef } from "react"; import './A ...

Steps for incorporating a toggle feature for displaying all or hiding all products on the list

Looking for some guidance: I have a task where I need to display a limited number of products from an array on the page initially. The remaining items should only be visible when the user clicks the "Show All" button. Upon clicking, all items should be rev ...

What could be causing certain link titles to appear outside of my <a> tags?

Check out this jsbin link to see the issue I am facing. I noticed that some of my link titles are appearing outside the anchor tags. Initially, I thought it was because some titles were enclosed in double quotes. I tried creating a function to fix this, b ...

Isotope: Real-time JSON content extracted from Google Spreadsheet

My goal is to populate an Isotope list using data from a Google Spreadsheet JSON. However, I'm facing issues with the animation and sorting functionality once I add the JSON. Although I have verified that the JSON/JavaScript for loading it works, I am ...

A sleek CSS text link for a stylish video carousel

I am attempting to create a CSS-only text link to video slider within our Umbraco CMS. Due to the limitations of TinyMCE WYSIWYG, I am restricted in the amount of code I can use as it will strip out most of it. So far, I have developed a basic CSS slider ...

What are the benefits of installing NPM for Vue.js?

When incorporating vue.js into my laravel project, the installation of NPM is necessary. How does npm play a role in integrating vue.js? ...

Mapping choices array in ReactJS using the id as a key reference

Looking for assistance with JavaScript as I am relatively new to it. I have a page displaying scheduled exams, and clicking on "Learn more" opens a modal where you can edit exam details. Currently, the modal displays selected equipment and allows changing ...