Utilize the Split method within a loop in Vue.js

I'm currently faced with a challenge where I need to extract the last 3 letters of each filename stored in an API response. The data is coming from a database and one of the columns contains image file names. Here's a snippet of my code:

     axios.get('/api/v1/chats/messages/' + this.chat).then(response => {

                this.result = response.data;
                this.details = this.result.data;

                for (var j = 0; j < this.details.length; j++) {
                    this.str = this.details[j].image;
                    this.details[j].image_type = this.str.split(".");
                }
                console.log(this.details)
            })
                .catch(error => {

                    toastr.error('Something went wrong', 'Error', {
                        positionClass: 'toast-bottom-right'
                    });

                    this.cancelAutoUpdate();
                });

If anyone can provide guidance on how to achieve this or suggest alternative methods to retrieve file extensions in Vue.js, your help would be greatly appreciated. Thank you!

Answer №1

When using the split function to split a string into an array by a separator, make sure to remember to access the specific array element you are interested in.

To correctly retrieve the desired array element, replace this.str.split("."); with this.str.split(".")[1]

const details = [
  {
    image: 'image1.jpg',
  },
  {
    image: 'image2.png',
  },
  {
    image: 'image3.gif',
  }
]

for (let detail of details) {
  let str = detail.image;
  detail.image_type = str.split(".")[1];
}

console.log(details)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to display child component using VueRouter

Recently, I started delving into VueJS and decided to create a new Vue application using vue-cli. After making a few modifications, this is what my router.js looks like: import Vue from 'vue' import Router from 'vue-router' import Hell ...

Combining Various Time Periods in JavaScript

After encountering various old solutions, most utilizing jQuery, for adding multiple durations together, I decided to create my own script below. While I may not be a JS expert, I am open to input on any potential issues with this code or a more efficient ...

Require a v-alert notification to appear on every page, ensuring visibility across the site

Imagine a scenario where there is a right drawer that displays a grade dropdown with options like grade1, grade2, and grade3. On all pages, I need a v-alert notification strip to show the total count of students. For example, if I select grade3 from the ri ...

Please select the option to choose all values

Currently, I am working on implementing a select option feature on my webpage. I have integrated PHP into it to ensure that the selected option remains unchanged after submission. My goal is to include a value of "any" so that when the user chooses "ANY," ...

"Integrate envMap into the materials section of the model.json file

I successfully exported an object from Blender to .json format for use with three.js. I manually added all the maps to the exported file, which were not included by the exporter but could easily be manually added after mapping correctly in Blender. model. ...

Ways to stop click propagation in the case of a parent anchor link containing a button among its children

Every time I click on the Link parent, it triggers a click event on the button as well. I want these events to be independent. <Link className="product-item__link" to={`/products/${product.category}/${product.id}`} > <div className ...

E/AndroidRuntime: CRITICAL ERROR: main --- java code in an android app

I've been working on a map application and I've run into some issues. Can anyone help me figure out what's wrong with my code? ERROR 10-25 01:37:41.296 28673-28673/com.onemap.activities E/AndroidRuntime: FATAL EXCEPTION: main 10-25 01:37:4 ...

Disregard Cloudflare's Automatic RocketLoader feature for certain JavaScript scripts

After extensive research and failed attempts, I am seeking help to disable Cloudflare Rocketloader for a specific JavaScript file on my WordPress website. Specifically, I need to exclude the Automatic Rocket Loader for a particular .js file. I attempted t ...

What is the reason behind RxJs recording 2 events during a long keypress?

I'm in the process of creating a user interface that reacts to keyPress events. Utilizing technologies like Angular and RxJS allows me to identify specific events. [Latest packages installed] The code structure appears as follows this.keyboard$ ...

What is the best way to generate a hyperlink that will open a raphael graph in my own browser?

If I have a web page that includes a raphael.js drawing in <div id='my-canvas'></div> <body> <div id='part_one'>...</div> <div id='my-canvas'></div> <div id='part_thre ...

Using Ember.js to make a REST API request

Looking for guidance on how to integrate a REST API (providing JSON data) into Ember templates (hbs). I have a service hosted on Apache Tomcat and I'm struggling to utilize its response in Ember JS. Despite trying various approaches found online, I ha ...

Angular-ui-bootstrap modal failing to display provided data

I have been working on implementing model data into a modal window that opens. The data is passed through a $http.post success and also in failure then() with different titles and button texts. Several data points are being passed to the modal: //.then(){ ...

What is the best method to assign values to AngularJS controller variables using Python Selenium or the JavaScript console?

After utilizing Python Selenium and AngularJS for a few months, I am currently attempting to adjust certain AngJS variables (specifically the aslider filter from here) and refresh the page in order to extract some data. Below is the code I am using for thi ...

Can you show me how to bind this to a function in events using vue methods?

methods:{ setSwiper() { const test = new something; test.customEvent('changeEvent', this.handleChange); }, handleChange(){ console.log(this)// vue instance } } Within the method handleChange(), I aim to re ...

Switching to version 2 of date-fns: Not a Number

I am currently in the process of updating the date-fns module from version 1 to version 2. Prior to the update, the following helper method functioned as expected: const { format, parseISO, differenceInSeconds } = require("date-fns"); const new ...

When using requirejs and vue.js together, the error message "Vue is not defined" may be encountered

My code snippet looks like this: <script type="text/javascript" src="../../node_modules/requirejs/require.js"></script> <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script> <script>console.log(Vue ...

Implementing the rendering functionality in Vuejs 3 to activate the parent component method from its child

Is there a way to call the clicked method on app2 from within ComponentA? Let's explore how this can be achieved in the provided example. const app = Vue.createApp({}); app.component('ComponentA', { template: `<button @click="cl ...

Struggling to transfer information from JavaScript to Python Flask?

I am currently working on a basic configuration where I need to send a string to my Flask application through Ajax, but unfortunately, I am encountering Error code 400: Bad request. Here is the JavaScript code snippet: headers = { 'Content-type&a ...

Tips for linking two tus servers

Trying to find a solution for uploading files with resume capability to Cloudflare using the tus enabled API. The challenge is ensuring that credentials remain secure, which prevents direct uploading from the browser to Cloudflare. This requires implementi ...

Making adjustments to a Jquery data attribute can have a direct impact on CSS

My CSS is using a data attribute, but when I try to change it with jQuery, the change is not reflected on the screen or in the DOM. $('#new-1').data('count', 5); .fa-stack[data-count]:after { position: absolute; right: -20%; to ...