Running some javascript code before rendering in a list

Question

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.

What is your question? How when to run some code? What exactly the code should be? or generating an index? Please ask one specific question per post — T J
– T J, Commented May 14, 2021 at 8:09
The question is, how do i grab the last part of the absolute url returned? Should i reform the in javascript and have it ready there, or can i just do this from within the vue js looping. I am able to generate the index in pure javascript and also access the value. — Gandalf
– Gandalf, Commented May 14, 2021 at 8:14
@TJ UIts not two questions in one!! To fully explain for your needs, is it possible to run a js code at this level v-for="value in roomsData.room_photos" — Gandalf
– Gandalf, Commented May 14, 2021 at 8:17

Anastazy · Accepted Answer · 2021-05-14 08:16:12Z

2

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]
})

answered May 14, 2021 at 8:16

Anastazy

4,8062 gold badges16 silver badges24 bronze badges

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

2 Comments

Gandalf Over a year ago

How can i set an index that can be accessed in the reformed object. In vue {{value}} gives me the last part but i would like also to access the index. I want to access like v-for="(value,index) in roomsData.room_photos"

Anastazy Over a year ago

You can access index as you wrote. From Vue documentation: "v-for also supports an optional second argument for the index of the current item." vuejs.org/v2/guide/list.html

Ohgodwhy · Accepted Answer · 2021-05-14 08:15:03Z

1

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
}, [])

answered May 14, 2021 at 8:15

Ohgodwhy

50.9k11 gold badges86 silver badges115 bronze badges

Comments

Dipan Sharma · Accepted Answer · 2021-05-14 08:13:19Z

0

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

answered May 14, 2021 at 8:13

Dipan Sharma

1,1439 silver badges18 bronze badges

Collectives™ on Stack Overflow

Running some javascript code before rendering in a list

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related