Vue.JS prints empty values from JSON Object

Question

I'm writing this code where a Vue.JS module calls a PHP file that fetches data from an external server and returns a JSON response. I had written a loop for getting a particular field from JSON and print them in a conversation format. But it displays only empty message bubbles with no text (The number of message bubbles is correct but no text inside it).

Here's my code:

const app = new Vue({
  el: "#chatview",
  data: {
    data:[],
    txtInput: '',
    mid:0

  },

    methods:

    {

    GetBubbleType: function (name){

    if(name === "Support")
            return "yours messages";
    else
            return "mine messages";
    },

    },

    mounted(){
                        axios.post(
  './ConversationGetter.php',
  {
    function2call: 'getRecord',
    id: 1,
  }
)
.then(response =>  {this.data=response.data.data;
console.log(response.data);
})
.catch(error => {});

},
    template: `
  <div style ="font-family:Open Sans;font-size:16px"> 
    <div v-for="message in data">
  <div class="fade-in">
        <div v-bind:class="GetBubbleType(data.name)">
        <div class="message last">
        <p>{{data.message}}</p>
        </div>

        </div></div></div>  `
})

The response returned from PHP:

{
  "data": [
    {
      "Modified_Time": "2019-12-13T16:08:36+05:30",
      "$currency_symbol": "$",
      "Message": "Hey!",
      "Created_Time": "2019-12-13T16:08:36+05:30",
      "Name": "Me",
    },
    {

      "Modified_Time": "2019-12-13T16:08:27+05:30",
      "$currency_symbol": "$",
      "Message": "Yo!",
      "Created_Time": "2019-12-13T16:08:27+05:30",
      "Name": "Me",
    },

  ],
}

you refer to data.name but it should be data.Name - case is significant in javascript - you also have "message in data" then use data.name ... so it actually should be GetBubbleType(message.Name) — Jaromanda X
– Jaromanda X, Commented Dec 16, 2019 at 7:03
see the other mistake you made ... use message not data, since message is each value of data — Jaromanda X
– Jaromanda X, Commented Dec 16, 2019 at 7:05
Side note, why is your conversation getter method a POST request? — Mike K
– Mike K, Commented Dec 16, 2019 at 7:08
Also, is the JSON response you posted in the second block of code response.data.data? Or is that response.data? — Mike K
– Mike K, Commented Dec 16, 2019 at 7:09

Presmelito · Accepted Answer · 2019-12-16 07:23:33Z

3

You should call the message since you are looping through the data prop it should be {{message.Message}} not {{data.message}} inside the paragraph tag

When you loop through data prop each loop object contains message meta data

{

      "Modified_Time": "2019-12-13T16:08:27+05:30",
      "$currency_symbol": "$",
      "Message": "Yo!",
      "Created_Time": "2019-12-13T16:08:27+05:30",
      "Name": "Me",
    },

You should be able to access each object property like this {{message.Message}} inside the v-for loop

answered Dec 16, 2019 at 7:23

Presmelito

2124 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Vue.JS prints empty values from JSON Object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related