Reorder the position of an item within an array

Question

Reorder the position of an item within an array

I have an XML data source that provides all the information needed for my Vue app. Everything is working smoothly except for one specific value.

The issue lies in retrieving a date from an element, which is currently formatted as:

['2022-10-25']

However, I actually need it to be displayed as 25-10-2022.

Currently, I am using the following code snippet to retrieve the date:

item.datum.join().toString()

Is there a way to manipulate this date format? I have tried using MomentJS since it's already installed, but haven't been successful in making it work.

javascript arrays vue.js momentjs

Answer 1

Answer №1

To achieve this, one simple approach is to use the split function on the string with the delimiter being "-". After splitting, you can then reverse the array and finally join it back together using the same delimiter "-".

Alternatively, if you have Moment.js installed in your project, you can utilize that for date formatting.

// result step 1
console.log('2022-10-25'.split("-"));
// result step 2
console.log('2022-10-25'.split("-").reverse());
// final result
console.log('2022-10-25'.split("-").reverse().join("-"));
// using moment.js
console.log(moment('2022-10-25').format("DD-MM-YYYY"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Answer 2

To achieve this, one simple approach is to use the split function on the string with the delimiter being "-". After splitting, you can then reverse the array and finally join it back together using the same delimiter "-".

Alternatively, if you have Moment.js installed in your project, you can utilize that for date formatting.

// result step 1
console.log('2022-10-25'.split("-"));
// result step 2
console.log('2022-10-25'.split("-").reverse());
// final result
console.log('2022-10-25'.split("-").reverse().join("-"));
// using moment.js
console.log(moment('2022-10-25').format("DD-MM-YYYY"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Answer 3

Answer №2

Wouldn't it be possible to just flip the string around?

let names = ['John-Doe']
let desiredName = names[0].split('-').reverse().join('-')

Answer 4

Wouldn't it be possible to just flip the string around?

let names = ['John-Doe']
let desiredName = names[0].split('-').reverse().join('-')

Reorder the position of an item within an array

Answer №1

Answer №2

Similar questions

Is Vue.JS compatible with AJAX requests for http calls?

How can you use ng-click to re-sort data that has already been loaded using Angular's ng-click?

The true essence of Angular values only comes to light once the view has been updated

Interpret a variety of date formats using date-fns

Utilizing Vue Js and Query to retrieve data from a Jira Rest API endpoint

"Create a dynamic entrance and exit effect with Tailwind CSS sliding in and out from

What is the process for refreshing HTML elements that have been generated using information from a CSV document?

Is it possible to transform a Vuejs project into Vue-Native?

The received URL from the POST request in React is now being opened

Guide on transmitting Cookie from Server to User's Browser

PHP - organizing an array into sets

What is causing the issue with $(document).append() method in jQuery version 1.9.1?

Looking for assistance with transferring API information to components

Implementing a progress loader in percentage by simultaneously running an asynchronous setTimeout counter alongside a Promise.all() operation

Unable to implement the hover property for the entire class in CSS

What are some solutions to troubleshoot the issue with my select dropdown menu?

Adjusting the size of the parent element for a ThreeJS renderer

Struggling to retrieve data from Firebase in React Native?

Searching for related values in a nested array of objects using JavaScript: A guide

What methods can be used to identify if a browser is mobile and adjust the size of a video accordingly using JavaScript conditions?