Array issue with Vuejs and axios

Question

Hi I receive an answer from an axios like this:

axios.post('/api/hr_employee/days/'+ this.period_data.year +'/'+ this.period_data.month +'?page='+this.currentPage+'&api_token='+App.apiToken)
 .then(response => {
      this.posts = JSON.stringify(response.data.data);
      console.log(this.posts.rut);
      this.rowsQuantity = JSON.stringify(response.data.data.rut.length);
})

If I check the response it displays:

console.log(JSON.stringify(response.data.data));

{"rut":["06152617-K","06628494-8","06802969-4","06974036-7","07066149-7","07174172-9","07274753-4","07835227-2","08068401-0","08142157-9","08602937-5","08820315-1","08883533-6","09134412-2","09360615-9","09426000-0","09482390-0","09535406-8","09874855-5","10033721-5","10033741-K","10137545-5","10313233-9","10431151-2","10626085-0","10628514-4","10642899-9","10725575-3","10750262-9","10790603-7","10923452-4","10963260-0","11099111-8","11155155-3","11166398-K","11243121-7","11656483-1","11670463-3","11694645-9","11756501-7","11813180-0","11831400-K","11849551-9","11938713-2","12025353-0","12069398-0","12233298-5","12252924-K","12297111-2","12501219-1","12642557-0","12791259-9","12793546-7","12885196-8","12921934-3","12996111-2","13042688-3","13175573-2","13252171-9","13405296-1","13492547-7","13708510-0","13764500-9","13917718-5","14003387-1","14008227-9","14313469-5","14352987-8","14481738-9","14594420-1","15050542-9","15081798-6","15538007-1","15583027-1","15757306-3","15808735-9","15910256-4","15918421-8","15947022-9","16281232-7","16404869-1","16411890-8","16543379-3","16698947-7","16727358-0","16787383-9","16788913-1","16849126-3","17113779-9","17125113-3","17128461-9","17200607-8","17258553-1","17292825-0","17390237-9","17707004-1","17927553-8","17995199-1","18202568-2","18239456-4","18255994-6","18267465-6","18273096-3","18291733-8","18566961-0","18579236-6","18657051-0","18805028-k","18842465-1","18987839-7","19068615-9","19181860-1","19208732-5","19229525-4","19355444-K","19390553-6","19640455-4","19677914-0","19691447-1","19844084-1","19903195-3","19966543-K","20057484-2","20060059-2","20226059-4","20227575-3","20260330-0","20406658-2","20483426-1","20729074-2","20800385-2","20998161-0","21828453-1","21902443-6","22588139-1","22845770-1","23468753-0","23645227-1","23881022-1","24623559-7","24658304-8","24773648-4","24811238-7","24959860-7","25215942-8","25259612-7","25310541-0","25310683-2","25310734-0","25383726-8","25486922-8","25705970-7","25939855-K","26057740-9","26072855-5","26173938-0","26299443-0","26303301-9","26380591-7","26488988-k","26567665-0","26597593-3","26598819-9","26803446-3","26868737-8","26913967-6","26980959-0","27008182-7","27008183-5","27029453-7","27141399-8","27231254-0","27474935-0"],"full_name":["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""],"total_days":[30,30,30,21,30,30,30,30,30,30,30,30,30,30,27,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,1,30,30,30,26,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,17,30,30,30,30,30,30,30,30,30,30,29,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,26,30,30,30,30,1,30,30,16,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]}

BUT if I do this

 this.posts = JSON.stringify(response.data.data);
 console.log(this.posts.rut);
  undefined

so I wonder why does it display undefined if this.posts has same value? how can I fix it?

Thanks

Qoyyima Fias Salam · Accepted Answer · 2021-10-14 15:48:49Z

1

I think it is because you stringify the response.data.data so this.posts data type become string. The string don't have rut property. That cause undefined when you log it.

I guess you don't need to JSON.stringify the response.data.data

try

this.posts = response.data.data;
this.rowsQuantity = response.data.data.rut.length;

answered Oct 14, 2021 at 15:48

Qoyyima Fias Salam

1847 bronze badges

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

Comments

Salvino D'sa · Accepted Answer · 2021-10-14 15:48:00Z

0

That's because response from Axios is already in JSON format, but you are converting it to a string. To fix this issue, change the following line

From this:

this.posts = JSON.stringify(response.data.data);

To this:

this.posts = response.data.data;

You shall then be able to access the properties within the this.posts object

answered Oct 14, 2021 at 15:48

Salvino D'sa

4,5761 gold badge14 silver badges26 bronze badges

Comments

Lucas David Ferrero · Accepted Answer · 2021-10-14 15:53:39Z

0

that's because you're trying to use the property access operator in a String value. You could fix that by calling JSON.parse(response.data.data) but I believe that axios already parses the response for you, so I think you can avoid using JSON.stringify.

JSON.stringify() returns a String value. You're getting undefined and not an error because Javascript does something called Object Wrapping (in this case it does new String(...))

answered Oct 14, 2021 at 15:53

Lucas David Ferrero

1,98219 silver badges48 bronze badges

Collectives™ on Stack Overflow

Array issue with Vuejs and axios

3 Answers 3

Comments

From this:

To this:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

From this:

To this:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related