Get json data in VueJS

Question

onMounted(() => {
  productService.value
    .getProducts()
    .then((data) => (products.value = data));

  console.log((products))
});

When I print products with console.log, here what I have.

capture of the console

I see that the data I want are in RawValue but I don't know how to access them.
I tried Object.values(products) or just console.log(products._rawValue) or console.log(products.rawValue) it print undefined.

Do you know what function call ?

Thanks

You need to define variables in the data property and fill them with incoming data. — Milos N.
– Milos N., Commented Jul 5, 2021 at 13:13
Try console logging 'data' to verify it's structure. You may actually need to set 'products' (or 'products.value') to a property of data i.e. something like products.value = data.products. — Tim
– Tim, Commented Jul 5, 2021 at 13:37
Hi @KateP, I just wanted to make sure, is this data coming from firebase? P.S. It will really help us if you tell us what package are you using to receive that data. — Irfandy J.
– Irfandy J., Commented Jul 5, 2021 at 15:04

Daniel · Accepted Answer · 2021-07-05 17:42:05Z

1

There are 2 issues

#1 - you're using console.log(products) which shows you the reactive object, what you need instead is console.log(products.value) which will only show the value, which should match the content of data.produtcs

#2 - you might find that 👆 now shows an empty result. The reason that's happening is that you're calling the console log after the async function, but before it finishes, so you're calling it before it has a chance to update. To fix that, you can log as part of the async function

onMounted(() => {
  productService.value
    .getProducts()
    .then((data) => {
      products.value = data;
      console.log(products.value);
    })
});

If you're using the products inside a template, you don't need to worry about what's before or after the async function since it will re-render the component on change.

Also, you probably don't need to define productService as a ref, the class is likely not something that needs to be reactive, so you can just do simple assignment and then skip the .value to call getProducts

answered Jul 5, 2021 at 17:42

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kate P Over a year ago

Thank you very much it worked ! Indeed I was trying products.value but it was showing an empty result, now placed where you said it's fine

Carlos · Accepted Answer · 2021-07-05 14:45:15Z

0

with axios what I do is take out the data with response.data you could try

                    onMounted(() => { 
                    productService.value.getProducts().then((response) => (
                        products = response.data
                        )); 
                        console.log(products.length); 
                });

edited Jul 5, 2021 at 14:45

answered Jul 5, 2021 at 13:47

Carlos

74 bronze badges

2 Comments

Kate P Over a year ago

Thank you very much for your answer. Unfortunatly it doesn't work because products is not directly the array but in products there is the array in rawValue

Carlos Over a year ago

try with onMounted(() => { productService.value .getProducts() .then((response) => (products= response.data)); console.log(products); });

Collectives™ on Stack Overflow

Get json data in VueJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related