Exploring JSON API Data with Vue Js

Question

Exploring JSON API Data with Vue Js

While working on my Vue Js project, I encountered an issue with displaying data from an API in JSON format. Despite using

this.obj =JSON.stringify(this.Flats);

and successfully seeing all the data using console.log, I struggled to loop over and view the payment object.

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

BuildingsService.getAllFlats().then((response) => {
            this.Flats = response.data.response;

       
             this.obj =JSON.stringify(this.Flats);
             console.log(this.Flats,"dataaa")

           
        });

  <div v-for="(object,index) in obj" :key="index"> //didn't work 
                               <span> {{object.flat_number}}   </span>

                                      <span > {{object.payment}}   </span>
                                </div>

javascript json vue.js object

Answer 1

Answer №1

It seems like you're fetching the array in Flats, converting it to a string with JSON.stringify, and then storing the result in the variable obj. Subsequently, you are trying to iterate through the string as if it were an array.

Consider this revised approach:

BuildingsService.getAllFlats().then((response) => {
    this.Flats = response.data.response;
    this.obj = this.Flats; // Keeping a duplicate string variable may be unnecessary
});

Alternatively, simply loop through the existing Array you have stored:

<div v-for="(object,index) in Flats" :key="index"> // This method should work fine

Answer 2

It seems like you're fetching the array in Flats, converting it to a string with JSON.stringify, and then storing the result in the variable obj. Subsequently, you are trying to iterate through the string as if it were an array.

Consider this revised approach:

BuildingsService.getAllFlats().then((response) => {
    this.Flats = response.data.response;
    this.obj = this.Flats; // Keeping a duplicate string variable may be unnecessary
});

Alternatively, simply loop through the existing Array you have stored:

<div v-for="(object,index) in Flats" :key="index"> // This method should work fine

Answer 3

Answer №2

Unable to add comments, but it seems like you are encountering an error related to accessing a property called payment.

The error is likely due to some objects in the array not containing the payment object.

Implementing v-if="object.payment" should help resolve this issue.

Answer 4

Unable to add comments, but it seems like you are encountering an error related to accessing a property called payment.

The error is likely due to some objects in the array not containing the payment object.

Implementing v-if="object.payment" should help resolve this issue.

Exploring JSON API Data with Vue Js

Answer №1

Answer №2

Similar questions

Is there a way to dynamically replace a section of a link with the current URL using JavaScript or jQuery?

Waiting for Selenium in Javascript

Guide to displaying numerous points on mapbox by utilizing a for each loop statement

Transform JSON object to a class/interface object using Typescript

Lazy loading a React grid gallery as you scroll

Is your sticky sidebar getting in the way of your footer?

The Vue devServer proxy doesn't seem to be resolving the CORS error issue for me

What is the quickest way to find and add together the two smallest numbers from a given array of numbers using JavaScript?

transform python string into json with proper structure

AngularJS Date Formatting

Discovering the Week by week commencement and conclusion dates utilizing angularjs

The issue with Angular's mat-icon not displaying SVGs masked is currently being investigated

I am trying to figure out how I can include "all types of JSON data" in my typed request model when using a REST API. Can anyone

Changing $scope within an AngularJS service

Managing the display of numerous ngFor components

How can we know when a JavaScript ES6 arrow function comes to a close?

Transform JSON data into a datatable by utilizing the rjsonio package

Steps to prevent inputting an entire JSON object into a sole field in AWS Athena

Removing an element from a dynamic dictionary in Python removes it from the entire dictionary, rather than just a specific key

Dealing with dynamic CORS settings in Apache and PHP