Using vue.js to make an HTTP GET request to a web API URL and display

I am currently utilizing vue.js to make an http request to a web api in order to retrieve a list of projects and display them in a list. However, I am encountering an issue where only one item from the response array of eight items is being rendered. Any assistance would be greatly appreciated! https://codepen.io/mruanova/pen/mprEap?editors=1111

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
<div id="app">
{{projects}}
<ul>
  <li v-for="project in projects">PROJECT {{project.ProjectId}}</li>
</ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            projects: []
        },
        ready: function () {
            var self = this;
            const url = "https://246gg84zg8.execute-api.us-west-2.amazonaws.com/prod/projects";
            this.$http.get(url).then(function (data) {
                console.log(JSON.parse(data.response).Items.length)
             console.log(JSON.parse(data.response).Items[0].ProjectId)
                self.$set('projects', JSON.parse(data.response).Items)
            })
        }
    })
</script>

current result:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

PROJECT

expected:

PROJECT 1 PROJECT 2 PROJECT 3 PROJECT 4 PROJECT 5 PROJECT 6 PROJECT 7 PROJECT 8

Answer №1

It is vital to address a few issues in this scenario. Firstly, the utilization of an outdated version of Vue is strongly discouraged. Upon revising the provided codepen example and upgrading to the latest Vue version, the functionality of your code appears to be working effectively.

https://codepen.io/nickforddesign/pen/rpMLgV?editors=1011

new Vue({
  el: '#app',
  data() {
    return {
      projects: []
    }
  },
  created() {
    const url = 'https://246gg84zg8.execute-api.us-west-2.amazonaws.com/prod/projects';
    this.$http.get(url).then(data => {
      const items = JSON.parse(data.response).Items
      items.map(item => {
        // Ensure Vue's reactivity by adding items to the projects array
        this.projects.push(item)
      })
    })
  }
})

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

Unable to get the Express.js Router functioning correctly on my server, even in a basic scenario

I am encountering an issue with using express.Router(). It was not functioning correctly in my application for serving JSON from MongoDB, so I attempted to simplify the scenario. However, I am receiving a 404 Not Found error in the request. What steps shou ...

Submit JSON data that is not empty in the form of a custom format within the query string

Attempting to transmit JSON data using a GET request. JSON data: var data = { country: { name: "name", code: 1 }, department: {}, cars: ["bmw", "ferrari"], books: [] } Code for sending: var posting = $.ajax({ ur ...

The value of the comment box with the ID $(CommentBoxId) is not being captured

When a user enters data in the comment box and clicks the corresponding submit button, I am successfully passing id, CompanyId, WorkId, and CommentBoxId to the code behind to update the record. However, I am encountering an issue as I also want to pass the ...

find all the possible combinations of elements from multiple arrays

I have a set of N arrays that contain objects with the same keys. arr[ {values:val1,names:someName},   {values:val2,names:otherName}, ] arr2[   {values:valx,names:someNamex}, {values:valy,names:otherNamey}, ] My goal is to combine all possible c ...

initiating a submission upon the occurrence of an onchange event on an input field of type "file"

I have encountered an issue while trying to submit a form using the onchange event of an input element with type file. The problem is that it submits an empty form even when a file has been chosen. Here is the code snippet: var form = document.createElem ...

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...

Error: The function or method save() has not been resolved

The function model.save() for mongoose is not being properly defined. models/genre.js 'use strict'; const mongoose = require('mongoose'); const Schema = mongoose.Schema; const GenreSchema = new Schema({ name: {type: String, requi ...

Can you clarify the distinctions between @nuxtjs/google-gtag, @nuxtjs/gtm, @nuxtjs/google-analytics, and vue-gtag, and which one would be most suitable for GA4

I'm diving into the world of analytics and feeling quite overwhelmed by it all. My goal is to implement Google Analytics 4 in my nuxt SSR webapp, but I'm struggling with the abundance of options available. I came across a dilemma on nuxtjs/goog ...

Understanding Variable Scope in JavaScript: How Variables are Accessed in Different Functions

I've been experimenting with a script that utilizes jQuery's get function to transfer data to another page and display the returned information as an alert on the current page. My goal is to send both the search field value from an input form (wh ...

How can I dynamically load a 3D model (in JSON format) at the current location of the mouse using Three.JS?

I'm currently working on a feature that involves loading a 3D model based on the mouse's position. Utilizing jQuery drag and drop functionality for this purpose has helped me load the model onto the canvas successfully, but I'm facing issues ...

Utilize AngularJS to monitor the amount of time users spend within the web application and automatically activate an event at designated intervals

Is there a way to monitor how long a user is active on the website and trigger an event once they reach 30 seconds of browsing time? ...

Challenge with cross-origin resource sharing between Laravel as the backend and Vue frontend on a Plesk server running Nginx

Encountering a CORS (Cross-Origin Resource Sharing) issue while authenticating users from my Vue frontend to my Laravel backend and Flutter mobile app. The backend API works via Postman, and the Flutter app has no CORS issues. However, when trying to log i ...

Upload a high-quality canvas image (dimensions: 1800px x 1080px) to a server with the help of asp.net

I am facing an issue with saving a canvas image to the web server. The problem arises when the image size exceeds 200x200 pixels and has high resolution – it fails to save in such cases. Saving a smaller image works fine, but larger images with high re ...

After making a POST request, I must ensure that the page is rendered accordingly

How can I efficiently handle requests to the server and update the page without reloading it, following SPA principles using useEffect()? I attempted to implement something like this: useEffect (() => { addProduct (); }) but it proved to be ineffectiv ...

The name 'withStyles' is nowhere to be found

import * as React from "react"; import Button from "@material-ui/core/Button"; import * as PropTypes from "prop-types"; import {WithStyles} from '@material-ui/core'; import "./App.css"; import PageTwo from "./components/PageTwo"; ...

Is it possible to link the _id of a mongodb array to its corresponding clientId in another array?

I am facing a challenge with 2 arrays retrieved from my MongoDB database. The first array is called users and it contains user objects structured like this: [{ email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a1beb ...

How to pass only the clicked element to the onClick function in React.js

I have several elements with the same className, and I want to add the className active to an element (with the className history-node) when it is clicked, in addition to its current className. However, I am facing an issue where the child elements of tha ...

Hello, I'm looking for assistance with this ReactJS code. Is there anyone who can help me

I am not receiving any output and also not encountering any errors, how can I resolve this issue? import React from 'react' function Array() { function myConcat() { const Villain = ["Harley Quinn", "Brainiac", "Deathstroke"]; cons ...

The AJAX response containing jQuery is failing to produce any visible changes

On Page 1 of my website, there is a form that, upon submission, loads Page 2 using jQuery. This process involves calling a PHP page and displaying the output on Page 1 without actually reloading the entire page. To maintain security, I have set up session ...

Error message: Unable to run npm script serve due to permission issues with vue-cli-service

Attempting to execute a basic vue project, but encountering difficulties running it on my openSUSE TW (20200615) system. I have NVM for managing my node installation. Here is my current environment: nvm --version # 0.35.3 node --version # v14.4.0 npm --v ...