how can i make this api to display in the browser

propertyComponent

<template>
      <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Property Component</div> 
                      <div v-for="(property, i) in properties" :key="i">
                         <p> {{property.category_id}}</p>
                      </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default{

      data () {
        return { 
         properties:[],
            property:{
              id:'',
              category_id:'',
                type:'',
                image:'',
                purpose:'',
                description:'',
                country:'',
                region:'',
                city:'',
                lon_lat:'',
                status:'',
                slug:'',
                      }
               }
            },


  created: function() {
      this.fetchSomething()
       },


       methods:{

      fetchSomething() {
              axios.get('/api/property')
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
             console.log('this an api');
             }
        }
    }
    
</script>

api/property

{"properties":[{"id":13,"category_id":"Iola Hayes","type":"Room","image":"1549011515.png","purpose":"Rent","description":"Ut velit dicta sed s","country":"Antarctica","region":"Dolores et qui dolor","city":"Ab sed voluptatibus","lon_lat":"Quam dolore sint asp","status":"Unsell","slug":"","user_id":"1","created_at":"2019-02-01 08:58:35","updated_at":"2019-02-02 19:23:06"}]}

please i need help

realrandyallen

7 years ago

Level 44

Depending on how your data is coming back from your api you just need to do something like:

axios.get('/api/property').then((response) => {
    console.log(response);
    this.properties.push(response); // or this.properties.push(response.data); (depending)
}).catch((error) => {
    console.log(error);
});

mariohbrino

7 years ago

Best Answer

Level 40

You can use eloquent relationships. Laravel eloquent relationships

model - add the relationship on your model Property

public function category()
{
    return $this->belongsTo(Category::class);
}

controller - by default laravel return json

public function index()
{
    $property = new Property();
    return $property->with('category')->get();
}

public function index()
{
    return Property::with('category')->get();
}

In case you need to pass more than one relationship, you can pass a array

public function index()
{
    return Property::with(['category', 'other-method'])->get();
}

Please or to participate in this conversation.