CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Gandalf
Gandalf

Reputation: 13693

Running some javascript code before rendering in a list

I have some data I am receiving from the server. The data is an array of image objects with no explicit key and I can read it in javascript like this:

var images_obj = response.data.room_photos;
images_obj.forEach((url, index) => {
console.log('Index: ' + index + ' Url: ' + url.url);
});

The data is in this format:

[ { "url": "/var/www/html/uploads/609cd3aaaaefd.jpg" }, { "url": "/var/www/html/uploads/609cd3aaa9dc2.jpg" }, { "url": "/var/www/html/uploads/609cd3aab1252.jpg" }, { "url": "/var/www/html/uploads/609cd3aab147a.jpg" }, { "url": "/var/www/html/uploads/609cd3aab0226.jpg" }, { "url": "/var/www/html/uploads/609cd3aaaf92b.jpg" }, { "url": "/var/www/html/uploads/609cd3aaec480.jpg" }, { "url": "/var/www/html/uploads/609cd3ab3a61b.jpg" }, { "url": "/var/www/html/uploads/609cd3ab432cb.jpg" }, { "url": "/var/www/html/uploads/609cd3ab00b91.jpg" }, { "url": "/var/www/html/uploads/609cd3ab02040.jpg" }, { "url": "/var/www/html/uploads/609cd3ab43f3e.jpg" }, { "url": "/var/www/html/uploads/609cd3ab3a634.jpg" }, { "url": "/var/www/html/uploads/609cd3ab4729f.jpg" }, { "url": "/var/www/html/uploads/609cd3ab47168.jpg" }, { "url": "/var/www/html/uploads/609cd3ab7af65.jpg" }, { "url": "/var/www/html/uploads/609cd3ab7dae1.jpg" }, { "url": "/var/www/html/uploads/609cd3ab8738f.jpg" }, { "url": "/var/www/html/uploads/609cd3ab86f15.jpg" }, { "url": "/var/www/html/uploads/609cd3ab8af48.jpg" }, { "url": "/var/www/html/uploads/609cd3ab95423.jpg" }, { "url": "/var/www/html/uploads/609cd3abbbdf9.jpg" }, { "url": "/var/www/html/uploads/609cd3abc455e.jpg" }, { "url": "/var/www/html/uploads/609cd3abca83e.jpg" }, { "url": "/var/www/html/uploads/609cd3abca0a0.jpg" }, { "url": "/var/www/html/uploads/609cd3abcfa7a.jpg" }, { "url": "/var/www/html/uploads/609cd3abd9d73.jpg" }, { "url": "/var/www/html/uploads/609cd3ac09a00.jpg" }, { "url": "/var/www/html/uploads/609cd3ac1382f.jpg" } ]

I want to render the images in a carousel and I can do it like this:

<div class="col-md-12">
    {{roomsData.room_photos}}
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" v-for="value in roomsData.room_photos">
    <div class="carousel-item active">
      <img class="d-block w-100" :src="value" alt="First slide">
      {{value.url}}
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    </div>

However, the image url object is an absolute url of an ubuntu box so I only need the last part i.e 609cd3aab147a.jpg for each url. How can I run some javascript to grab and display the last part which I also need to concatenate with my website i.e https://example.com/uploads/609cd3aab147a.jpg

I would also like to generate an index that I can target when deleting an image.

Upvotes: 0

Views: 50

Answers (3)

Anastazy
Anastazy

Reputation: 4766

Before you bind data fetched from API to view-model, do the transformation you want, example:

this.roomsData.room_photos = response.data.room_photos.map(item => {
  let url_parts = item.url.split('/')
  return location.origin + '/' + url_parts[url_parts.length - 1]
})

Upvotes: 2

Ohgodwhy
Ohgodwhy

Reputation: 50787

You can reduce the response and generate a new array from the provided objects.

const images_obj = response.data.room_photos.reduce((images, photo) => {
  images[] = { url: photo.url.split('/').pop() }

  return images
}, [])

Upvotes: 1

Dipan Sharma
Dipan Sharma

Reputation: 1133

You can do something like this to get the image name.

let url = "/id/118/200/300.jpg";

let filename = url.split('/').pop().split('?')[0];

Reference link : https://www.encodedna.com/javascript/how-to-get-the-filename-from-url-in-javascript.htm

Upvotes: 0

Related Questions