How to transfer part of an array to a new line?

Question

Good afternoon, please tell me, I have an array consisting of numbers, how can I make the part of the array that stands after the number before each unit be transferred to a new line?

My App.vue:

<template>
  <div id="app">
    <div class="mounth">{{ mounthDays }}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
        mounthDays: [],
    }
  },
  mounted() {
    for (var x = 0; x < 12; x++) {
      for (var i = 1; i <= 31; i++) {
        this.mounthDays.push(i)
      }
    }
    if(this.mounthDays[123] === 31){
      this.mounthDays.splice(59, 3)
      this.mounthDays.splice(120, 1)
      this.mounthDays.splice(181, 1)
      this.mounthDays.splice(273, 1)
      this.mounthDays.splice(334, 1)



    }
    console.log(this.mounthDays)

    }
  }
</script>

I'm not sure what you are asking for. Can you show the desired output? — David Weldon, Jul 03 '19 at 17:19
Now I will add a screen to my question and explain how I want it to be — Andrey Belichenko, Jul 03 '19 at 17:20
Now my array looks like this, I want the rest of the array to move to a new line after the digit before the one. — Andrey Belichenko, Jul 03 '19 at 17:23
To me, It is really unclear what you are asking. Can you rephrase your question or show an example of the result you want to achieve? — Dennis, Jul 03 '19 at 17:24
for example, you see the number 28 in the second row, and after it stands 1. Here I want the blank line after the 28, and the rest of the array is transferred to the new line — Andrey Belichenko, Jul 03 '19 at 17:24
It will be normal if I write in the Word how I want my array to look? — Andrey Belichenko, Jul 03 '19 at 17:26
i think you want to create a calendar, try to check this [question](https://stackoverflow.com/questions/52878624/render-closing-tag-conditionally-in-order-to-emulate-calendar-behavior) — Boussadjra Brahim, Jul 03 '19 at 17:26
@AndreyBelichenko taking an array to a new line? It is unclear what you want? — Abhilash Gopalakrishna, Jul 03 '19 at 17:26
You've added images but which of them shows the desired result? Please give each a title. — Popnoodles, Jul 03 '19 at 17:52

eddyP23 · Answer 1 · 2019-07-03T17:54:39.930

Instead of having an array of all numbers, make it array of arrays and then print it on separate lines. Something like this should work:

var monthsWithDays = [];

for (var x = 0; x < 12; x++) {
    var days = [];

    for (var i = 1; i <= 31; i++) {
        days.push(i)
    }

    monthsWithDays.push(days);
}

monthsWithDays.forEach(daysArray => console.log(daysArray));

If you want just a string with newlines, then something like this should work:

monthsWithDays.map(daysArray => daysArray.join(",")).join("\n")

EDIT: I now see what you are trying to do with your splice stuff. I don't think you have a right approach here. But the code above could be fixed to do this:

function daysInMonth (month, year) {
    return new Date(year, month, 0).getDate();
}

var monthsWithDays = [];

for (var x = 1; x <= 12; x++) {
    var days = [];

    for (var i = 1; i <= daysInMonth(x, 2019) ; i++) {
        days.push(i)
    }

    monthsWithDays.push(days);
}

monthsWithDays.map(daysArray => daysArray.join(",")).join("\n")

I borrowed the daysInMonth function from another question here

score 0 · Answer 2 · edited Jul 16 '22 at 03:53

Here's a working example for the current year, which uses a computed property and some date math:

<template>
  <div>
    <div v-for="(month, index) in monthsAndDays" :key="index">{{ month }}</div>
  </div>
</template>

<script>
// https://stackoverflow.com/questions/1184334
const daysInMonth = (month, year) => new Date(year, month, 0).getDate();

// [1..n]
const oneToN = n => Array.from(Array(n), (_, i) => i + 1);

export default {
  computed: {
    monthsAndDays() {
      const year = new Date().getFullYear();
      return oneToN(12).map(i => oneToN(daysInMonth(i, year)));
    },
  },
};
</script>

Lol, I just cited the same daysInMonth question – eddyP23 Jul 03 '19 at 17:55 — eddyP23, Jul 03 '19 at 17:55

How to transfer part of an array to a new line?

2 Answers2