How to show array data without loop in vuejs and axios

Question

I am trying to print data without loop in my vuejs 3 app bellow my response and code In My Axios Api I got reponse:

[{id: 2, name: "sub_title", value: "The Best Developer Team", created_at: null, updated_at: null},…]
0
: 
{id: 2, name: "sub_title", value: "The Best Developer Team", created_at: null, updated_at: null}
1
: 
{id: 3, name: "title",…}
2
: 
{id: 4, name: "description",…}
3
: 
{id: 5, name: "button_text", value: "Get Started", created_at: null, updated_at: null}
4
: 
{id: 6, name: "video_text", value: "How We Works", created_at: null, updated_at: null}
5
: 
{id: 7, name: "video_url", value: "#video", created_at: null, updated_at: null}
6
: 
{id: 8, name: "url", value: "/frontend/assets/img/hero/1667138531.png", created_at: null,…}
7
: 
{id: 9, name: "image", value: "1667138531.png", created_at: null, updated_at: null}

And Vuejs Component:

axios.get('/api/sites/hero').then(response => {

                    this.heros = response.data.map(obj => {
                        let hero_data = {};
                        hero_data[obj.name] = obj.value;
                        console.log(hero_data);
                        return hero_data;
                    })
 
                }).catch(function (handleError) {
                    console.log("Error: ", handleError);
                }, []);

And my console.log is:

{sub_title: 'The Best Developer Team'}
{title: 'We Are the Brilliants Creative Secure Maintain Build in Terms of website Development'}
{description: 'End-to-end payments and website management in a si…le solution. Meet the right team to help realize.'}
{button_text: 'Get Started'}
{video_text: 'How We Works'}
{video_url: '#video'}
{url: '/frontend/assets/img/hero/1667138531.png'}
{image: '1667138531.png'}

Now i want to print in my div {{heros.title}} but its not working.

Answer 1

It's better to create just one dict.

axios.get('/api/sites/hero').then(response => {

                    this.heros = {}
                    let self = this;
                    response.data.map(obj => {
                        self.heros[obj.name] = obj.value;
                        return obj;
                    })
 
                }).catch(function (handleError) {
                    console.log("Error: ", handleError);
                }, []);


{sub_title: 'The Best Developer Team', title: 'We Are the Brilliants Creative Secure Maintain Build in Terms of website Development', description: 'End-to-end payments and website management in a si…le solution. Meet the right team to help realize.', button_text: 'Get Started', video_text: 'How We Works', video_url: '#video', url: '/frontend/assets/img/hero/1667138531.png', image: '1667138531.png'}

It will create dict like this and you can then direct access

heros.title