How to parse json in Vue js to use it in template

Question

<template>
    <div class="row w-20 " >
        <div class="card col-4 ">
             <ul>
                <li v-for="message in conversations.messages" :key="message.messages">
                    {{message.text}}  
                </li>        
            </ul> 
            
        </div>
    </div>
</template>

<script>
export default {
    
    props: ['conversation_index_route'],
    data() {
        return {
            conversations: [],
            url: 'http://127.0.0.1:8000/comms/conversation/',
            
        }
    },
    beforeMount() {
        this.$eventBus.$on('selectConversation', this.getConversations)
        this.getConversations();
    },
    methods: {
        getConversations(id) {
            console.log(this.url+id);
            axios.get(this.url+ id)
                .then(response => {
                    this.conversations = response.data;
                    this.conversations = JSON.parse(this.conversations.message);
                    console.log(this.conversations);

                });            
        }
    }

}
</script>

conversation_index_route:"http://127.0.0.1:8000/comms/conversation"
conversations:Object
all_staff_attended:false
centre_id:5
children:""
classes:""
cover_image:"https://via.placeholder.com/150x150"
created_at:"2020-05-30 19:01:59"
exited_users:null
id:257
last_id:null
messages:Array[1]
  0:"{"_id":1854,"text":"This is the beginning of this conversation","createdAt":"2020-05-30 19:01:59","system":true}"
parent_users:"3016"
parents:Array[1]
staff_users:"180,181"
staffs:Array[2]
status_id:1
title:"Test"
updated_at:"2020-05-30 19:01:59"
url:"http://127.0.0.1:8000/comms/conversation/"

So what shall I code to use the message text in my template to display the text messages?

Just Try {{message[0].text}} . Its work because text is inside Message Array. @Archaana — Sandesh Mankar
– Sandesh Mankar, Commented Jun 24, 2020 at 2:52

Dan Knights · Accepted Answer · 2021-03-20 18:34:02Z

9

You'd have to do JSON.parse(conversations.messages[0]).text. This way you parse the object inside messages and have access to its properties.

edited Mar 20, 2021 at 18:34

answered Jun 24, 2020 at 3:02

Dan Knights

8,4184 gold badges28 silver badges55 bronze badges

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

2 Comments

Archaana Over a year ago

heyyy hiiii , this is wat he ask me to do .. but can i know where to code this line exactly .. there is where i am stucked.. soorryy to ask that

Archaana Over a year ago

heyy thanks man , i got it already ... i {{JSON.parse(conversations.messages).text}} inside the v-for

Pri Nce · Accepted Answer · 2022-02-16 07:10:05Z

2

Simply JSON.parse the string

var myJson = "[{\"id\":72,\"food_item_id\":\"56\",\"variation_id\":\"20\",\"price\":\"50\",\"created_at\":\"2021-06-29T05:29:14.000000Z\",\"updated_at\":\"2021-06-29T05:29:14.000000Z\",\"variant\":null}]";
var myJson2 = JSON.parse(myJson);
console.log(myJson2);

answered Feb 16, 2022 at 7:10

Pri Nce

7318 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to parse json in Vue js to use it in template

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related