We help IT Professionals succeed at work.
Troubleshooting Question

Looping through JSON data in Vue

Dinesh Bali
Dinesh Bali asked
on
24 Views
Last Modified: 2020-11-15
Hi,

I am trying to loop my JSON data which I have received from axion get method.

I can print the data and I am abe to display the data. All is coming in JSON format only as expected.

when I am looping then it is not giving me the results.

Below is the code snippet and loop code.
Please advise.

created() {
      this.$axios
      .get("https://localhost:44308/api/Values/GetEmployees")
      .then((resp) => {
        console.log(resp.data);

        this.myJsonObj = resp.data;


        //)
      });

      
  },


data() {
    return {
      myJsonObj:{},
    };
  },

<template>
            <div v-for="employee in this.myJsonObj.employees" :key="employee.employeeid">
              <br />
              <b>
                 {{employee.firstname}} <br/><br/>
              </b>
              <br/>
              
            </div>

</template>

[
   {
      "employeeid":"1",
      "firstname":"Vicky",
      "lastname":"Papa",
      "homephone":"8989898",
      "notes":"notes here",
      "attendance":{
         "month":[
            {
               "name":"January",
               "day1":"Present",
               "day2":"Present",
               "day3":"Half Day"
            },
            {
               "name":"Feburary",
               "day1":"Absent",
               "day2":"Half Day",
               "day3":"Present"
            }
         ]
      }
   },
   {
      "employeeid":"2",
      "firstname":"Papa",
      "lastname":"John",
      "homephone":"8989898",
      "notes":"notes here",
      "attendance":{
         "month":[
            {
               "name":"January",
               "day1":"Present",
               "day2":"Present",
               "day3":"Half Day"
            },
            {
               "name":"Feburary",
               "day1":"Absent",
               "day2":"Half Day",
               "day3":"Present"
            }
         ]
      }
   }
]
Comment
Watch Question

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
data looks ok...
what language are you using?

<template>
  <div v-for="employee in this.myJsonObj.employees" :key="employee.employeeid">
    {{employee.firstname}}
  </div>
</template>
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
oops, I did not check tags, it is angular :)
what do you get as result?
can you post it...

Author

Commented:
Thanks for your reply.
I am using Vue.

My Json string copied above is printing when I write {{this.myJsonObj }}

Not sure if Json is considered as string or what

Please advise.   
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
have a look at this
my first angular thingy :)

https://jsfiddle.net/HainKurt/jwr7gom9/

html
<div id="tmpEmployee">
  <template>
    <div v-for="employee in employees" :key="employee.employeeid">
      {{employee.firstname}}
    </div>
  </template>
</div>
vue+JS
new Vue({
  el: "#tmpEmployee",
  data: {
    employees: [{...}]
  }
});
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
I dont see anywhere "employees"
maybe you should just use
v-for="employee in this.myJsonObj"
or use
v-for="employee in employees"
var employees = resp.data;

Author

Commented:
Hi,

empoyees allias I am directly giving in for loop that's why employees object is not there.

Below code does not worked:
 <div v-for="employee in this.myJsonObj" :key="employee.employeeid">
              <br />
              <b>
                 {{employee.firstname}} <br/><br/>
              </b>
              <br/>
              
            </div>


Also, when I tried below way then I am getting below error:

113:13  error  'employees' is assigned a value but never used  no-unused-vars


created() {
    
    this.$axios
      .get("https://localhost:44308/api/Values/GetEmployees")
      .then((resp) => {
        console.log(resp.data);
        var employees = resp.data;
        this.myJsonObj = resp.data;
      });

      
  }

<template>
  <div v-for="employee in employees" :key="employee.employeeid">
              <br />
              <b>
                 {{employee.firstname}} <br/><br/>
              </b>
              <br/>
              
            </div>

</template>

Please advise.
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
dont you have any code before created...
or can you create a jsfiddle demo so I can look at it...
Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
many thanks for your replies.

I am able to go inside the loop but employee firstname is not printing.

See below:

<div><b>  <br><br></b></div>

data() {
    return {
      
      myJsonObj:{},
      
    };

<template>

 <div v-for="employee in this.myJsonObj" :key="employee.employeeid">
                <b>
                    {{employee.firstname}} <br/><br/>
                </b>
            </div>

</template>
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
check again my previous reply, you had two issues.
first on OK : this.myJsonObj
now second :
Also v-for need to be at least inside an element, it can't be on the root element to loop over.

so replace:
<template>


 <div v-for="employee in this.myJsonObj" :key="employee.employeeid">
                <b>
                    {{employee.firstname}} <br/><br/>
                </b>
            </div>


</template>

by :
<template>
     <div>
            <div v-for="employee in this.myJsonObj" :key="employee.employeeid">
                <b>
                    {{employee.firstname}} <br/><br/>
                </b>
            </div>
    <div>
</template>

Author

Commented:
Many thanks for reply.
I can print full json on browser by writing
{{this.myJsonObj}}
Screenshot attached for reference

Also, I had given partial template code just to avoid un-necessary complexity.
code is already wrapped see below:

Code in going into the loop but not printing the firstname.
By any change this is not converted to JSON object and considering full string.

Please advise.
<template>
  <form @submit="postData" method="post">
    <b-container class="bv-example-row main">
      <b-row>
        <b-col cols="8">
          title: {{ title }}
   {{this.myJsonObj}}
          <div>
            <div>
              <div
                v-for="employee in this.myJsonObj.employees"
                :key="employee.employeeid"
              >
                <b> {{ employee.firstname }} <br /><br /> </b>
              </div>
            </div>
          </div>
 </b-col>
      </b-row>
    </b-container>

    <button type="submit">Post</button>
  </form>
</template>

{{this.myJsonObj}}  value on browser screen.

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Why your template is now containing a form?
Maybe try to fix your original question instead creating a more complex one...
You already have a working code...


Author

Commented:
Hi leakim971,

That is the reason I have just given code snippet so that I should not confuse.
I used form because i need to post the data as well once user clicks on post button.
There is more code which I have not posted.

I only posted code related to json and loop things.

I have removed the form and tried again, still the same issue.
looping is happening but firstname is not printing. See screen shot below:


Hope this clarifies.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Use my full page code, update the GetEmployees URL to match with your environment (why do you put the full URL instead the relative part?) and let me know if it still doesn't work.

Author

Commented:
My complete code is from:
https://github.com/core-player/vue-core-video-player-examples

Then I modified attached files. See below:
src.zip

Author

Commented:
Loop can be seen in Main.vue in components folder

Author

Commented:
My GetEmployees needs to come from different source application. That is the reason for testing purpose I ave full service URL.

Author

Commented:
Attached package.json as wellpackage.jsonbabel.config.js

Author

Commented:
It is reading json as full string see below the code and screenshot
<div>
              <div
                v-for="employee in this.myJsonObj.employees"
                :key="employee.employeeid"
              >
                <b> {{ employee }} <br /><br /> </b>

                Break point here
              </div>
            </div>



Response is not splitted into 2 parts



Author

Commented:
Guys, please advise.
This is urgent to me.

Author

Commented:
Many thanks guys for all your help.

It worked finally by changing below line:
this.myJsonObj =resp.data.employees.employee;
in code

axios
      .get("https://localhost:44308/api/Values/getemployees")
      .then((resp) => {
        console.log(resp.data);
        this.myJsonObj =resp.data.employees.employee;
      });

Really thank you for all your efforts you guys gave me.

Many thanks again.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions