如何按周一至周日排序工作时间JSON数据并补全缺失日期

To fix the ordering and missing days issue, we'll process the raw work hours data into a properly structured array before using it in your template. Here's how to modify your Vue code and template:

Step 1: Add Data Processing Logic #

First, we'll create helper functions to sort the days into Monday-to-Sunday order and fill in missing days with "歇业". We'll also fix scope issues in your AJAX call to ensure we can access the Vue instance correctly.

Step 2: Clean Up the Template #

Update the template to use a helper method for displaying hours (or "歇业") to reduce repetition and improve readability.

Modified Vue Code #

new Vue({
  el: '#feed',
  data: {
    data: [],
    work: [],
    pid: '',
    reviews: []
  },
  methods: {
    // Helper to format hours display
    getHoursText(item) {
      return item.opens_at === '歇业' ? '歇业' : `${item.opens_at} to ${item.closes_at}`;
    },
    // Process raw hours into ordered, complete array
    formatWorkHours(rawHours) {
      // Define the desired day sequence: Monday to Sunday
      const orderedDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
      
      // Create a map for quick lookup of existing entries
      const hoursMap = rawHours.reduce((map, entry) => {
        map[entry.day] = { ...entry }; // Copy to avoid mutating original data
        return map;
      }, {});
      
      // Build the final array, filling missing days
      return orderedDays.map(day => {
        return hoursMap[day] || { 
          day: day, 
          opens_at: '歇业', 
          closes_at: '' 
        };
      });
    }
  },
  mounted() {
    const self = this; // Capture Vue instance context for AJAX callback
    this.$nextTick(() => {
      const requestData = { pid: self.pid };
      $.ajax({
        url: "https://need2spot.com/alpha/get/post/",
        data: requestData,
        type: "POST",
        dataType: 'json',
        success: function(e) {
          if (e.status === 1) {
            self.data = e.data;
            self.reviews = e.data.reviews;
            // Process hours before assigning to the work property
            self.work = self.formatWorkHours(e.data.wrk_hours);
          }
        }
      });
    });
  }
});

Modified Template #

<table bgcolor="#00FF00" width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-hover table-bordered">
  <thead>
    <tr bgcolor="#577c14">
      <th v-for="(item, key) in work" :key="key">
        <span v-if="new Date().getDay() - 1 === key" class="today">{{ item.day }}</span>
        <span v-else-if="new Date().getDay() === key" class="tomorrow">{{ item.day }}</span>
        <span v-else class="all">{{ item.day }}</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item, key) in work" :key="key">
        <span v-if="new Date().getDay() - 1 === key" class="today">{{ getHoursText(item) }}</span>
        <span v-else-if="new Date().getDay() === key" class="tomorrow">{{ getHoursText(item) }}</span>
        <span v-else>{{ getHoursText(item) }}</span>
      </td>
    </tr>
  </tbody>
</table>

Key Changes Explained #

• formatWorkHours Function: This enforces the Monday-to-Sunday order by iterating over a predefined day list. It uses a lookup map to quickly find existing entries and fills missing days with a "歇业" placeholder.
• getHoursText Method: Reduces duplicate code in the template by handling the logic to show either the hours range or "歇业".
• Fixed Scope: Using const self = this; ensures we can access the Vue instance inside the AJAX callback (a common pitfall with jQuery AJAX).
• Cleaner Template: Replaced repeated hours display logic with the helper method for better maintainability.

This solution will ensure your table always shows days in the correct order, with "歇业" for any missing days in the original JSON data.

内容的提问来源于stack exchange，提问作者Wanderer