Javascript 文本未按正确顺序显示

我试图让JSON数据显示在一个段落中，但在不同日期获取的数据之间有一个分隔符

function getAllLogs(emId) {
    $.getJSON('datafile.json', function(data) {
        $("#" + emId).html("All logs:<br>");
        var firstDateDisplayed = false;
        $.each(data, function(index, value) {
            //Only displays dates once, then all log sheets for that date
            if (firstDateDisplayed === false ||
                data[index-1].log_sheet.time !== value.log_sheet.time) {

                $("#" + emId).append("<br>----------------<br>");
                //Formats and appends date to a paragraph
                getLogDate(emId, index);
                firstDateDisplayed = true;
            }

            //Formats and appends time to a paragraph
            getLogTime(emId, index);
            //Formats and appends all data to a paragraph
            getLogData(emId, index);
        });
    });
}

我得到的是：

----------------

----------------        
Date 1
Time 1
Data 1
Time 2
Data 2
Time 3
Data 3
Date 2
Time 4
Data 4
Time 5
Data 5

JSON数据示例：

[
    {
        "log_sheet": {
            "data":"4",
            "date":"2012-07-27T00:00:00-06:00",
            "time":"2000-01-01T02:15:00Z",
            "more_data":"7"
        }
    },
    {    
        "log_sheet": {
            "data":"8,
            "date":"2012-07-27T00:00:00-06:00",
            "time":"2000-01-01T07:30:00Z",
            "more_data":"3"
        }
    }
]   

我该如何解决这个问题？我的日期显示正确，但为什么分隔符不正确

getLogTime函数：

//Gets, formats and displays the time for the current log sheet in the 
//header of a collapsible menu or paragraph
function getLogTime(emId, logNum) {
    //Accesses the JSON file
$.getJSON('datafile.json', function(data) {
    //Takes only the part of the string that corresponds to time
    var time = data[logNum].log_sheet.measured_at_time.substring(11,16);
    //Formats time to 12 hour clock according to the hour
    switch (time.substring(0, 2))
        {
    case "00":
        //Changes 00 to 12 and adds am
        time = time.replace(/00/, "12") + " am";
        break;
    case "01":
    case "02":
    case "03":
    case "04":
    case "05":
    case "06":
    case "07":
    case "08":
    case "09":
        //Removes extra 0 and adds am
        time = time.replace(/0/, "") + " am";
        break;
    case "10":
    case "11":
        //Adds am
        time += " am";
        break;
    case "12":
        //Adds pm
        time += " pm";
        break;
    case "13":
        //Replaces 13 with 1 and adds pm
        time = time.replace(/13/, "1") + " pm"
    case "14":
        //Replaces 14 with 2 and adds pm
        time = time.replace(/14/, "2") + " pm";
        break;
    case "15":
        //Replaces 15 with 3 and adds pm
        time = time.replace(/15/, "3") + " pm";
        break;
    case "16":
        //Replaces 16 with 4 and adds pm
        time = time.replace(/16/, "4") + " pm";
        break;
    case "17":
        //Replaces 17 with 5 and adds pm
        time = time.replace(/17/, "5") + " pm";
        break;
    case "18":
        //Replaces 18 with 6 and adds pm
        time = time.replace(/18/, "6") + " pm";
        break;
    case "19":
        //Replaces 19 with 7 and adds pm
        time = time.replace(/19/, "7") + " pm";
        break;
    case "20":
        //Replaces 20 with 8 and adds pm
        time = time.replace(/20/, "8") + " pm";
        break;
    case "21":
        //Replaces 21 with 9 and adds pm
        time = time.replace(/21/, "9") + " pm";
        break;
    case "22":
        //Replaces 22 with 10 and adds pm
        time = time.replace(/22/, "10") + " pm";
        break;
    case "23":
        //Replaces 23 with 11 and adds pm
        time = time.replace(/23/, "11") + " pm";
        break;
    }
    //Uses only a portion of the string to accommodate possible future
    //numbers
    if (emId.substring(0,4) === "time") {
        //Sets text in header to time
    $("#" + emId + " .ui-btn-text").html(time);
    } else {
        //For displaying all of the logs
    $("#" + emId).append(time + "<br>");
    }
});
}

//获取、格式化和显示
//可折叠菜单或段落的标题
函数getLogTime（emId，logNum）{
//访问JSON文件
$.getJSON（'datafile.json'，函数（数据）{
//仅获取字符串中与时间对应的部分
变量时间=数据[logNum]。记录表。在时间测量。子字符串（11,16）；
//根据小时将时间格式化为12小时时钟
开关（时间子串（0，2））
{
案例“00”：
//将00更改为12并添加am
时间=时间。替换（/00/，“12”）+“am”；
打破
案例“01”：
案例“02”：
案例“03”：
案例“04”：
案例“05”：
案例“06”：
案例“07”：
案例“08”：
案例“09”：
//删除额外的0并添加am
时间=时间。替换（/0/，“”）+“am”；
打破
案例“10”：
案例“11”：
//添加am
时间+=“上午”；
打破
案例“12”：
//添加pm
时间+=“下午”；
打破
案例“13”：
//将13替换为1并添加pm
时间=时间。替换（/13/，“1”）+“pm”
案例“14”：
//将14替换为2并添加pm
时间=时间。替换（/14/，“2”）+“pm”；
打破
案例“15”：
//将15替换为3并添加pm
时间=时间。替换（/15/，“3”）+“pm”；
打破
案例“16”：
//将16替换为4并添加pm
时间=时间。替换（/16/，“4”）+“pm”；
打破
案例“17”：
//将17替换为5并添加pm
时间=时间。替换（/17/，“5”）+“pm”；
打破
案例“18”：
//将18替换为6并添加pm
时间=时间。替换（/18/，“6”）+“pm”；
打破
案例“19”：
//将19替换为7并添加pm
时间=时间。替换（/19/，“7”）+“pm”；
打破
案例“20”：
//将20替换为8并添加pm
时间=时间。替换（/20/，“8”）+“pm”；
打破
案例“21”：
//将21替换为9并添加pm
时间=时间。替换（/21/，“9”）+“pm”；
打破
案例“22”：
//将22替换为10并添加pm
时间=时间。替换（/22/，“10”）+“pm”；
打破
案例“23”：
//将23替换为11并添加pm
时间=时间。替换（/23/，“11”）+“pm”；
打破
}
//仅使用字符串的一部分来适应可能的未来
//数字
中频（电磁干扰子串（0,4）=“时间”）{
//将标题中的文本设置为时间
$（“#”+emId+”.ui btn text”）.html（时间）；
}否则{
//用于显示所有日志
$（“#”+emId）.append（time+“
”）；
}
});
}

所以基本上你要做的就是在新的日期出现时键入---

var json = [
{
    "log_sheet": {
        "data":"4",
        "date":"2012-07-27T00:00:00-06:00",
        "time":"2000-01-01T02:15:00Z",
        "more_data":"7"
    }
},
{
    "log_sheet": {
        "data":"4",
        "date":"2012-07-27T00:00:00-06:00",
        "time":"2000-01-01T02:15:00Z",
        "more_data":"7"
    }
},
{
    "log_sheet": {
        "data":"4",
        "date":"2012-07-27T00:00:00-06:00",
        "time":"2000-01-01T02:15:00Z",
        "more_data":"7"
    }
},
{
    "log_sheet": {
        "data":"4",
        "date":"2012-07-27T00:00:00-06:00",
        "time":"2000-01-01T02:17:00Z",
        "more_data":"7"
    }
}
];


console.log("All logs:");
$.each(json, function(index, value) {
  if(index == 0 || (index > 0 && json[index-1].log_sheet.time !== value.log_sheet.time))
  {
   console.log("-----------");
  }
  console.log("Date " + index + ": " + value.log_sheet.date);
  console.log("Time " + index + ": " + value.log_sheet.time);
  console.log("Data " + index + ": " + value.log_sheet.data);
});

结果:

All logs:
-----------
Date 0: 2012-07-27T00:00:00-06:00
Time 0: 2000-01-01T02:15:00Z
Data 0: 4
Date 1: 2012-07-27T00:00:00-06:00
Time 1: 2000-01-01T02:15:00Z
Data 1: 4
Date 2: 2012-07-27T00:00:00-06:00
Time 2: 2000-01-01T02:15:00Z
Data 2: 4
-----------
Date 3: 2012-07-27T00:00:00-06:00
Time 3: 2000-01-01T02:17:00Z
Data 3: 4

因此，重写的函数如下所示：

function getAllLogs(emId) {
    $.getJSON('datafile.json', function(data) {
        var $output = $("#" + emId);
        $output.html("All logs:<br>");
        $.each(data, function(index, value) {
            //Only displays dates once, then all log sheets for that date
            if(index == 0 || (index > 0 && json[index-1].log_sheet.time !== value.log_sheet.time))
            {
                $output.append("<br>----------------<br>");
                //Formats and appends date to a paragraph
                //getLogDate(emId, index);
                $output.append("Date " + index + ": " + value.log_sheet.time +"<br/>");
            }
            //Formats and appends time to a paragraph
            //getLogTime(emId, index);
            $output.append("Time " + index + ": " + value.log_sheet.time +"<br/>");
            //Formats and appends all data to a paragraph
            //getLogData(emId, index);
            $output.append("Data " + index + ": " + value.log_sheet.data +"<br/>");
        });
    });
}

function getAllLogs(elementId)
{
    $.getJSON('datafile.json', function(data)
    {
        var logElement = $('#' + elementId).append('All logs:<br />');

        var lastLogDateDisplayed = null;
        $.each(data, function(index, value)
        {
            // check if we've reached another date
            if (lastLogDateDisplayed != value.log_sheet.date)
            {
                // update the last shown date, and select its html
                lastLogDateDisplayed = value.log_sheet.date;
                logElement.append('----------------<br />');
                    .append(getLogDate(value));
            }

            // select the time and data as html strings
            logElement.append(getLogTime(value))
                .append(getLogData(value));
        });
    });
}

函数getAllLogs（emId）{
$.getJSON（'datafile.json'，函数（数据）{
变量$output=$（“#”+emId）；
$output.html（“所有日志：
”；
$.each（数据、函数（索引、值）{
//仅显示一次日期，然后显示该日期的所有日志表
if（index==0 | |（index>0&&json[index-1].log_sheet.time！==value.log_sheet.time））
{
$output.append（“
---------------------
”；
//设置段落的格式并将日期附加到段落
//getLogDate（emId，索引）；
$output.append（“日期”+索引+”：“+value.log\u sheet.time+”
）；
}
//为段落设置格式并追加时间
//getLogTime（emId，索引）；
$output.append（“时间”+索引+：“+value.log\u sheet.Time+”
）；
//将所有数据格式化并附加到段落中
//getLogData（emId，索引）；
$output.append（“数据”+index+：“+value.log\u sheet.Data+”
）；
});
});
}

根据我从您的帖子中收集到的信息，您基本上是按照

日期属性对
数据
和
时间
的日志进行分组。如果是演员阵容，您可以尝试以下方式：

function getAllLogs(emId) {
    $.getJSON('datafile.json', function(data) {
        var $output = $("#" + emId);
        $output.html("All logs:<br>");
        $.each(data, function(index, value) {
            //Only displays dates once, then all log sheets for that date
            if(index == 0 || (index > 0 && json[index-1].log_sheet.time !== value.log_sheet.time))
            {
                $output.append("<br>----------------<br>");
                //Formats and appends date to a paragraph
                //getLogDate(emId, index);
                $output.append("Date " + index + ": " + value.log_sheet.time +"<br/>");
            }
            //Formats and appends time to a paragraph
            //getLogTime(emId, index);
            $output.append("Time " + index + ": " + value.log_sheet.time +"<br/>");
            //Formats and appends all data to a paragraph
            //getLogData(emId, index);
            $output.append("Data " + index + ": " + value.log_sheet.data +"<br/>");
        });
    });
}

function getAllLogs(elementId)
{
    $.getJSON('datafile.json', function(data)
    {
        var logElement = $('#' + elementId).append('All logs:<br />');

        var lastLogDateDisplayed = null;
        $.each(data, function(index, value)
        {
            // check if we've reached another date
            if (lastLogDateDisplayed != value.log_sheet.date)
            {
                // update the last shown date, and select its html
                lastLogDateDisplayed = value.log_sheet.date;
                logElement.append('----------------<br />');
                    .append(getLogDate(value));
            }

            // select the time and data as html strings
            logElement.append(getLogTime(value))
                .append(getLogData(value));
        });
    });
}

函数getAllLogs（elementId）
{
$.getJSON（'datafile.json'，函数（数据）
{
var logElement=$（'#'+elementId）.append（'All logs:
'）；
var lastlogdatedisplated=null；
$.each（数据、函数（索引、值）
{
//看看我们是否已经到了另一个日期
如果（lastLogDateDisplayed！=value.log\u sheet.date）
{
//更新最后显示的日期，并选择其html
lastLogDateDisplayed=value.log\u sheet.date；
logElement.append（'--------------
'）；
.append（getLogDate（value））；
}
//选择时间和数据作为html字符串
追加（getLogTime（值））
.append（getLogData（value））；
});
});
}

这里有一些改进值得注意。首先，我们只选择

elementId

元素一次。这将使选择器的性能从以前的命中率

1+4n

下降到

1

。此外，因此，

getLogDate

、

getLogTime

和

getLogData

不接受

值（即当前日志项），而是返回要附加到日志元素本身的dom或jQuery对象

这只是一些改动，但更简洁，希望能帮助解决您的问题。
问题是，当您使用
$.getJSON（）
获得更多数据时，您使用的是异步的AJAX。这意味着脚本不会停止等待调用完成，而是继续执行。既然有