Question

我正在使用ajax从api调用获取数据。工作正常。我只是想知道如何格式化distance_time，以使其更具可读性和用户友好性？我调查了文档，但似乎找不到快速进行转换的内容。有什么建议吗？

$.ajax({
url: 'https://exampleapi.com/key=my_key',
dataType: 'json',
type: 'GET',
contentType:'json',
success: function(data)
{
//console.log( data)

//get distance in miles
var distance_miles = data['route']['distance'];
//$('.distance_miles').html(distance_miles);

//get formatted time
var distance_time = data['route']['formattedTime'];
$('.distance_time').html(distance_time);

}
});

上面的代码输出：

"00:14:33";

对程序员来说很好，但是对用户而言却不是直觉。

我想显示：

14 mins and 33 secs

如果有几个小时，应该显示类似以下内容：

2 hours 14 mins and 45 secs

Answer 1

这不是完美的，我很确定您可以使用for语句减少代码量，但这是主要思想，当然您需要用数据替换字符串。

let distance_time = formatTimeString('02:10:01')
  console.log(distance_time)
  document.getElementById('time').innerHTML = distance_time

  function formatTimeString(time) {
    let arr = time.split(':')
    let distance_time = ''

    let hours = parseInt(arr[0])
    let minutes = parseInt(arr[1])
    let seconds = parseInt(arr[2])

    if (hours > 0 ) {
      distance_time += hours + ' hour'
      hours > 1 ? distance_time += 's ' : ' '
    }

    if (minutes > 0) {
      distance_time += minutes + ' minute'
      minutes > 1 ? distance_time += 's ' : ' '
    }

    if (seconds > 0) {
      distance_time += ' and ' + seconds + ' second'
      seconds > 1 ? distance_time += 's ' : ' '
    }

    return distance_time
  }

<html>
<head>
  <title>test</title>
</head>
<body>
The time you made is: <span id="time"></span>
</body>
</html>

我希望这可以帮助您找到更好的方法！

Answer 2

我不知道我是如何第一次在文档中错过了。一种快速简便的方法是使用.replace()或replaceWith()。更多详细信息here

这对我有用：

//get formatted time
var distance_time = data['route']['formattedTime'];
var distance_in_time = distance_time.replace(':',' hrs, ').replace(':',' Min and ') + ' secs.';
$('.distance_time').html(distance_in_time);

Answer 3

这将正确格式化您的字符串，并仅显示相关的时间后缀。还有一个用于将0填充到您的数字的参数-您的问题没有演示您如何希望这种行为，所以我将其留为选择（默认为true）

function formatTimeString(timeString, padZeros = true) {
  let arr = timeString.split(':').map(x => parseInt(x));
  let str = ['hour', 'min', 'sec'];

  return arr.reduce((acc, num, i) => {
    if (num <= 0) {
      return acc;
    } else {
      let digit = (padZeros && num < 10) ? '0' + num : num; 
      let suffix = num > 1 ? str[i] + 's' : str[i];
    
      return acc + `${digit} ${suffix} `;
    }
  }, '').replace(/(mins|min)/g, '$1 and').trim();
}

// Minutes and Seconds
console.log(formatTimeString("00:04:33", false));
console.log(formatTimeString("00:04:33", true));

// with Hours
console.log(formatTimeString("02:14:45", false));
console.log(formatTimeString("02:14:45", true));

// Just seconds
console.log(formatTimeString("00:00:50", false));
console.log(formatTimeString("00:00:50", true));

如何将JSON时间转换为可读的人类格式？

3 个答案: