Add elements from one array into designated positions within another array

Is there a way to extract the days and months from the current week and store it in an array within a specific field of an object? I need to be able to later iterate through this array to display the data.

I am unsure on how to achieve this.

<div v-for="day in days" :key="day.index">
  <p>{{ day.month }}</p>
  <p>{{ day.numberDay }}</p>
  <p>{{ day.textDay }}</p>
</div>
  data() {
    return {
      // days: [{ textDay: "", numberDay: "", month: "" }]
      days: []
      
    }
  },

  methods: {
    getCurrentWeek() {
      const currentDate = moment();

      const weekStart = currentDate.clone().startOf('isoWeek');

      const days = [];

      for (let i = 0; i <= 6; i++) {
        days.push({ textDay: moment(weekStart).add(i, 'days').format("dddd") });
        days.push({ numberDay: moment(weekStart).add(i, 'days').format("Do") });
        days.push({ month: moment(weekStart).add(i, 'days').format("MMMM") });
      }

    this.days = days
    }
  }

Answer №1

Make sure to add values to the days array in this manner. Let me know if this solution works for you.

    for (let j = 0; j <= 6; j++) {
days.push({dayText: moment(weekStart).add(j, 'days').format("dddd"), dayNumber: moment(weekStart).add(j, 'days').format("Do"), monthName: moment(weekStart).add(j, 'days').format("MMMM")});
}

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

Determining when a message has been ignored using php

One of the features I am working on for my app is adding announcements, which are essentially personalized messages to users. Once a user receives a message and dismisses it, I want to ensure that specific message does not appear again. Here is the PHP co ...

Exploring the power of AngularJS with JavaScript and utilizing the $scope

After spending the entire day trying to solve this issue, it seems like I might be missing something simple. Here's the problem at hand: I have a well-structured Nodejs/AngularJS application that utilizes Jade for templating. The server performs certa ...

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

Whenever I use a script to fetch an array of objects from PHP... I successfully display the results on my website by outputting them into Divs. The challenge arises when I introduce CSS animations. The animation only triggers if the variable length excee ...

What causes req.body to display as an empty object in the console during a POST request?

Having some trouble with my code. The middleware is supposed to return parsed data in the console as an object accessed by req.body, but it keeps returning an empty object for some reason. Check out Code and Console Snapshot 1 View Code and Console Snapsh ...

Setting null for HttpParams during the call

I am encountering an issue with HttpParams and HttpHeaders after upgrading my project from Angular 7 to Angular 8. The problem arises when I make a call to the API, as the parameters are not being added. Any assistance in resolving this matter would be gre ...

Issues with ng-click functionality not activating on <li> HTML elements

I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...

Greetings Universe in angular.js

Having trouble creating a Hello World page in angular.js. When I try to display {{helloMessage}}, it shows up instead of Hello World. I'm not sure where the issue lies. Within the folder are two files: angular.min.js and HelloWorld.html. In HelloWorl ...

Adjusting the Materui LinearProgressWithLabel progress value to reflect a custom value

Is it possible to update the progress value of Material UI's LinearProgressWithLabel component with a custom value instead of the default one? I am trying to achieve this by obtaining my desired value from the upload progress in the Axios.post method, ...

Conceal the HTML input element until the JavaScript has finished loading

Currently, I am using a JQuery plugin to style a form input with type 'file'. The plugin adds a new span over the input element to create a mask effect and encloses everything in a div. However, there is an issue where the standard HTML input box ...

Is there a way for me to replace zero with a different number dynamically?

Is there a way to dynamically insert a different number instead of zero in mongoose? displayCity: (req, res, next) => { let id = req.params.id; provinceAndCity.findById({ _id: id }).populate('city.0.limitation', 'title ...

Is there a way to automatically refresh a page as soon as it is accessed?

My goal is to create a page refresh effect (similar to pressing Command+R on Mac OS) when navigating to a certain page. For instance: Currently, when I navigate from "abc.com/login" to "abc.com/dashboard" after successfully logging in, the transition occ ...

Utilize dojo to manually trigger a window resize event

Is there a way to manually trigger the window resize event (the one that occurs when you resize your browser window) using Dojo? I need this functionality to dynamically resize my C3 Charts. I came across the on module in Dojo, which allows for listening ...

How to properly escape JSON with hyphen or dash in AngularJS ngSrc

Having trouble displaying an image from a json url with dashes. I attempted to use bracket notation but it does not seem to be functioning: <img ng-src="{{image.['small-size'].url || image.thumb}}"> When using single quotes, my angular vi ...

When I include the alert('it is functioning now'); function, it operates correctly, however, it is not desired in this situation

After adding alert('now it works') to this function, it only functions correctly. However, I do not want to include this alert but the function fails without it. function a() { var ac = document.forms["myForm"]["textfield"].value; $.ajax ...

select items using a dropdown menu in an Angular application

Let me describe a scenario where I am facing an issue. I have created an HTML table with certain elements and a drop-down list Click here for image illustration When the user selects in, only records with type in should be displayed Another image refere ...

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

I have an embedded iframe that contains a form with jQuery validation. When errors occur, the content height of the iframe increases dynamically. Below is the script I use to adjust the height of my iframe based on its content: function doIframe(){ o = d ...

What is the best approach to handle Flow types for component props and getDerivedStateFromProps when the props are not the same

Having a Component with its props, an additional prop is added for getDerivedStateFromProps. The issue arises when setting the props with the additional one, throwing an error that the prop is not being used. Conversely, setting it without the extra prop c ...

How can you optimize the storage of keys in JS objects?

Just pondering over this scenario: Consider a line definition like the one below, where start and end are both points. let ln = { s: {x:0, y:0}, e: {x:0, y:0}, o: 'vertical' } Now imagine having a vast array of lines, how can we sav ...

Is there a way to display all of them inline in Woocommerce?

Can anyone assist with making each of these inline? https://i.sstatic.net/YF9bu.png <div class="atc_nsv"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <ul> <li><img class="ad lazyloaded" data-src="//cdn.shopif ...

When using Sequelize, I encountered an error message from SQLite stating that the table does not exist despite having created

I am struggling to grasp the concept of how Sequelize operates and I can't figure out why I am encountering the SQLITE_ERROR: no such table: Users error even though I have created the table using sequelize.define. Here is my code: const { Sequelize, D ...