时间戳

首页 > 解决方案 > 如何将 rrule 日期值从数组转换为自定义字符串

javascript - 如何将 rrule 日期值从数组转换为自定义字符串

问题描述

我有一个这样的数组：

     [{
evening_feeding: false
    evening_feeding_time: "19:00"
    feeding_frequency_rule: **"FREQ=DAILY;INTERVAL=2"**
    id: 890
    morning_feeding: true
    morning_feeding_time: "04:00"
    noon_feeding: false
    noon_feeding_time: "12:00"
    pen_id: 299
    start_feeding_date: "2020-07-07"
}]

我只想在我的 html 视图中显示这个 feed_frequency_rule: "FREQ=DAILY;INTERVAL=2"作为例如Every day 之类的任何字符串。对此有何建议？

标签： javascriptangularjs

解决方案

您可以创建一个函数来格式化规则，这将首先解析规则，然后为给定规则返回一个人类可读的字符串。

如果找不到匹配项，我们将只返回原始 FREQ 值。

我创建了几行示例数据，然后显示在 Bootstrap 4 表中。

let feedData = [
    { 
        evening_feeding: false, evening_feeding_time: "19:00", 
        feeding_frequency_rule: "FREQ=DAILY;INTERVAL=2",
        id: 890, morning_feeding: true, morning_feeding_time: "04:00",
        noon_feeding: false, noon_feeding_time: "12:00",
        pen_id: 299, start_feeding_date: "2020-07-07"
    },
    { 
        evening_feeding: false, evening_feeding_time: "19:00", 
        feeding_frequency_rule: "FREQ=WEEKLY;INTERVAL=2",
        id: 891, morning_feeding: true, morning_feeding_time: "04:00",
        noon_feeding: false, noon_feeding_time: "12:00",
        pen_id: 300, start_feeding_date: "2020-07-07"
    }
]

function formatFeedingFrequencyRule(rule) { 
    let freq = rule.split(";")[0].split("=")[1].trim();
    switch (freq) {

        case "DAILY":
            return "Every day";

        case "WEEKLY":
            return "Every week";

        default:
            return freq;
    }
}

feedData.forEach(obj => { 
    document.getElementById("tbody_1").innerHTML += formatRow(obj);
});

function formatRow(obj) { 
    return `<tr><td>${obj.id}</td><td>${formatFeedingFrequencyRule(obj.feeding_frequency_rule)}</td>`
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container">
  <h5>Feeding Rules</h5>
  <table class="table">
<thead>
  <tr>
    <th>ID</th>
    <th>Feeding Frequency</th>
  </tr>
</thead>
<tbody id="tbody_1">
</tbody>
  </table>
</div>

</body>

推荐阅读