我想從一個JSON數據中打印出一個列表作爲jQuery中的列表標題列表

Question

{ 
    "error": [{ 
     "domain": "(SA 1) ", 
     "LessonName": "SA 1 Unit 1", 
    }, { 
     "domain": " (SA 1)", 
     "LessonName": "SA 1 Unit 2", 
    }, { 
     "domain": " (SA 1) ", 
     "LessonName": "SA 1 Unit 3", 
    }, { 
     "domain": "(SA 2) ", 
     "LessonName": "SA 2 Unit 1", 
    }, { 
     "domain": "(SA 2) ", 
     "LessonName": "SA 2 Unit 2", 
    }, { 
     "domain": "(SA 2) ", 
     "LessonName": "SA 2 Unit 3", 
    }, { 
     "domain": "(PSLT) ", 
     "LessonName": "PSLT 1", 
    }, { 
     "domain": "(PSIT) ", 
     "LessonName": "PSIT 1", 
    }, 

    ] 
} 

上面是我正在使用的JSON對象的結構。

我想打印出看起來像這樣的jQuery的排序列表任何人都可以幫助

> SA 1(domain) 
> SA 1 Unit 1(lessons under domain) 
> SA 1 Unit 2 
> SA 1 Unit 3 
> SA 2(domain) 
> SA 2 Unit 1(lessons under domain) 
> SA 2 Unit 2 
> SA 2 Unit 3 
> PSLT(domain) 
> PSIT 1(lessons under domain) 

這是我使用下面的代碼。但它是無法打印的所有域頭

jQuery.ajax({ 
    url: elaurl, 
    type: 'GET', 
    error: function(jqXHR, text_status, strError) { 
    alert("no connection"); 
    }, 
    timeout: 60000, 
    success: function(response) { 
    console.log(response.error.length); 
    json = response; 
    var temp = ''; 
    var i = 0; 
    var j = 0; 

    // var data = "'<h4>'" + response.error[i].domain + "'<h4/>'"; 

    for (i = 0; i < response.error.length; i++) { 

     if (response.error[i].domain != response.error[i + 1].domain) { 

     var data = '<h4>' + response.error[i + 1].domain + '<h4/>'; 

     $('#domain').append(data); 
     i++; 
     } 
    } 
    } 
}); 

Answer 1

你知道你總是會打印出列表中每個項目的「教訓」元素，而你只需要打印出「域「元素，如果它不同於之前的那個，是嗎？

你的AJAX響應函數可能類似於此：

success: function(response) { 
    var $html = $('#domain'); 
    response.error.forEach(function(e, i) { 
    // only print the domain if it's different than the previous error 
    if (i===0 || e.domain !== response.error[i-1].domain) { 
     $('<h4/>').text(e.domain).appendTo($html); 
    } 

    // always print the lesson 
    $('<h5/>').text(e.lesson).appendTo($html); 
    }); 
} 

Answer 2

有幾個問題：

1）數據質量。您的JSON不一致 - 例如您的域SA 1實際上在您的示例中以3種不同的方式表示爲「（SA 1）」，「（SA 1）」和「（SA 1）」。這將導致它們之間的任何字符串比較失敗，因爲它們永遠不會匹配。

2）代碼不太正確。你甚至從來沒有試圖打印課程名稱，以及您增加i額外的時間沒有任何理由，這意味着你錯過了一些行有一個在迴路中的邏輯錯誤。

這裏的修正後的數據和代碼：

JSON

{ 
    "error": [{ 
    "domain": "(SA 1)", 
    "LessonName": "SA 1 Unit 1", 
    }, { 
    "domain": "(SA 1)", 
    "LessonName": "SA 1 Unit 2", 
    }, { 
    "domain": "(SA 1)", 
    "LessonName": "SA 1 Unit 3", 
    }, { 
    "domain": "(SA 2)", 
    "LessonName": "SA 2 Unit 1", 
    }, { 
    "domain": "(SA 2)", 
    "LessonName": "SA 2 Unit 2", 
    }, { 
    "domain": "(SA 2)", 
    "LessonName": "SA 2 Unit 3", 
    }, { 
    "domain": "(PSLT)", 
    "LessonName": "PSLT 1", 
    }, { 
    "domain": "(PSIT)", 
    "LessonName": "PSIT 1", 
    }, 
    ] 
}; 

代碼

success: function(response) { 
    var currentDomain = ""; 
    var data = ""; 

    for (i = 0; i < response.error.length; i++) 
    { 

    if (response.error[i].domain != currentDomain) 
    { 
     data += '<h4>' + response.error[i].domain + '<h4/>'; 
     currentDomain = response.error[i].domain; 
    } 
    data += "Lesson: " + response.error[i].LessonName + '<br/>'; 
    } 
    $('#domain').append(data); 
} 

Answer 3

希望這有助於。甚至試圖把你的結構爲HTML表之前，你需要它組正確，否則事情就變得晦澀容易出錯。

閱讀並播放下面的代碼。它會輸出一個您需要的層次結構的數組，然後創建您的HTML。

var response = { 
 
    "error": [ 
 
     { 
 
      "domain": "(SA 1) ", 
 
      "LessonName": "SA 1 Unit 1", 
 
     }, { 
 
      "domain": " (SA 1)", 
 
      "LessonName": "SA 1 Unit 2", 
 
     }, { 
 
      "domain": " (SA 1) ", 
 
      "LessonName": "SA 1 Unit 3", 
 
     }, { 
 
      "domain": "(SA 2) ", 
 
      "LessonName": "SA 2 Unit 1", 
 
     }, { 
 
      "domain": "(SA 2) ", 
 
      "LessonName": "SA 2 Unit 2", 
 
     }, { 
 
      "domain": "(SA 2) ", 
 
      "LessonName": "SA 2 Unit 3", 
 
     }, { 
 
      "domain": "(PSLT) ", 
 
      "LessonName": "PSLT 1", 
 
     }, { 
 
      "domain": "(PSIT) ", 
 
      "LessonName": "PSIT 1", 
 
     }, 
 
    ] 
 
}; 
 

 
function success(response) { 
 
    var currentDomain = ''; 
 
    // First make your group headers 
 
    var redux = response.error 
 
    // Get the headers first 
 
    .reduce(function(acc, errorObj) { 
 
     var cleanDomain = errorObj.domain.replace(/^\s+|\s+$/gm, ''); 
 
     if (cleanDomain !== currentDomain) { 
 
      acc.push({ domain: cleanDomain, children: [] }); 
 
      currentDomain = cleanDomain; 
 
     } 
 
     return acc; 
 
    }, []) 
 
    // For each header, add children 
 
    .map(function (domainObj) { 
 
     // From all errors get the corresponding ones for lesson name, and take the title only 
 
     var firstLessonFound = false; 
 
     domainObj.children = response.error.reduce(function (acc, item) { 
 
      if (item.domain.replace(/^\s+|\s+$/gm, '') === domainObj.domain) { 
 
       var string = item.LessonName; 
 
       if (!firstLessonFound) { 
 
        string += ' (blah)'; 
 
        firstLessonFound = true; 
 
       } 
 
       acc.push(string); 
 
      } 
 
      return acc; 
 
     }, []); 
 
     return domainObj; 
 
    }); 
 

 
    console.log(redux) 
 
    // Here you then iterate over redux and generate your HTML 
 
} 
 

 
success(response);