1

I have a page that is supposed to display SharePoint list data. I was able to get it to work using REST API but since I'm using VUE.js framework, I wanted to try axios. I don't get an error when I look in the console but I do see a bunch of xml data instead of json. What am I doing wrong? Here's my code

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<div id="app">
<table>
<tr>
    <th>Email</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Phone</th>                      
</tr>
<tr v-for="user in users">
    <td>{{ user.Title }}</td>
    <td>{{user.First_x0020_Name}}</td>
    <td>{{user.Last_x0020_Name}}</td>
    <td>{{ user.Phone }}</td>                       
</tr>
</table>
{{fieldNames}}
</div>

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
  <script>
  new Vue({
    el: "#app",
    data: {
        fieldNames: "HELLO SharePoint 2013",
        status: '',
        users: []           
    },
    created: function(){
        this.getListData();
    },
    methods: {
        getListData: function(){
         var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('siteAdmins')/items";
        /*var headers = { 
            "accept": "application/json;odata=verbose" 
        };*/
            this.status = "getting data...";
            var vm = this;
            axios.get(endPointUrl).then(response => {
               console.log(response.data);

               vm.users = response.data

               /*for (var i = 0; i < response.data.value.length; i++) {
                        vm.users.push({
                          title: String(response.data.value[i]["Title"]),
                          fName: response.data.value[i]["First_x0020_Name"] != null ? String(response.data.value[i]["First_x0020_Name"]) : "",
                          lName: response.data.value[i]["Last_x0020_Name"] != null ? String(response.data.value[i]["Last_x0020_Name"]) : "",
                          phone: response.data.value[i]["Phone"] != null ? String(response.data.value[i]["Phone"])                                                    
                     });
                     console.log(resonse.data.value[i].Title);
                }*/
             });
        }
    }
});     

Here's an image of what I see in the console. enter image description here

  • 1
    looks like your accept header is commented out... – Derek Gusoff Feb 16 '18 at 21:35
1

Replace "response.data" with "response.data.value"

SharePoint likes to wrap all of its responses in another variable.

The final code should look like this

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<div id="app">
<table>
<tr>
    <th>Email</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Phone</th>                      
</tr>
<tr v-for="user in users">
    <td>{{ user.Title }}</td>
    <td>{{user.First_x0020_Name}}</td>
    <td>{{user.Last_x0020_Name}}</td>
    <td>{{ user.Phone }}</td>                       
</tr>
</table>
{{fieldNames}}
</div>

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
  <script>
  new Vue({
    el: "#app",
    data: {
        fieldNames: "HELLO SharePoint 2013",
        status: '',
        users: []           
    },
    created: function(){
        this.getListData();
    },
    methods: {
        getListData: function(){
         var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('siteAdmins')/items";
        var headers = { 
            "accept": "application/json;odata=verbose" 
        };
            this.status = "getting data...";
            var vm = this;
            axios.get(endPointUrl).then(response => {
               console.log(response.data.value);
               vm.users = response.data.value
             });
        }
    }
});     

I just tested this with the list name and field names matching the ones in my environment and it works just great

| improve this answer | |
  • Hi Razvan, that solution doesn't work for me. I'm not using vue but plain vanila javascript. Does it matter? – JustMe Sep 28 '18 at 3:35
  • What is the headers object doing? It doesn't appear to actually get used. – tnk479 Jan 21 '19 at 22:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.