前端處理JSON資料 - 轉為陣列以及簡單篩選

寫ASP.NET MVC的時候，前端與後端的資料處理上常常都會使用到JSON格式的資料，

頁面上的資料呈現與處理都可以直接使用前端程式來執行，而後端就只需要去做產出資料與接收資料的工作，

而前端程式中要去處理JSON資料時，我比較常用的就是把它轉為物件陣列然後再做進階的處理，

以下就簡單記錄一下這些處理的操作方式。

後端ASP.NET MVC程式

我在之前有針對後端產生JSON資料的方式有寫過幾篇文章，所以這邊我就不多做說明，

而我這邊用了兩種簡單的方式來產生JSON資料，一個是使用基本的JsonResult以及使用JSON.NET的處理方式，

JsonResult

這邊我使用的是Dictionary<string, object>的容器來裝載資料，最後再由程式去序列化為JSON格式的資料傳到前端。

[HttpPost]
public JsonResult GetProductsJSONResult()
{
  ProductService service = new ProductService();
  var data = service.FetchAll();
  List<Dictionary<string, object>> ja = new List<Dictionary<string, object>>();
  foreach (var item in data)
  {
    Dictionary<string, object> jo = new Dictionary<string, object>();
    jo.Add("ProductID", item.ProductID);
    jo.Add("ProductName", item.ProductName);
    jo.Add("CategoryID", item.CategoryID);
    jo.Add("CategoryName", item.Category.CategoryName);
    jo.Add("SupplierID", item.SupplierID);
    jo.Add("CompanyName", item.Supplier.CompanyName);
    ja.Add(jo);
  }
  return Json(ja);
}

 

ActionResult + JSON.NET

這裡就是使用JSON.NET所提供的JArray與JObject來裝載資料，最後再使用JsonConvert.SerializeObject做序列化為JSON的處理，

為了要讓回傳得標頭可以被正確讀取為JSON格式，所以 ContentType 就明顯指定為「application/json」

public ActionResult GetProducts()
{
  ProductService service = new ProductService();
  var data = service.FetchAll();
      
  JArray ja = new JArray();
  foreach (var item in data)
  {
    JObject jo = new JObject();
    jo.Add("ProductID", item.ProductID);
    jo.Add("ProductName", item.ProductName);
    jo.Add("CategoryID", item.CategoryID);
    jo.Add("CategoryName", item.Category.CategoryName);
    jo.Add("SupplierID", item.SupplierID);
    jo.Add("CompanyName", item.Supplier.CompanyName);
    ja.Add(jo);
  }
  return Content(JsonConvert.SerializeObject(ja), "application/json");
}

 

以上兩種後端產生JSON資料的程式雖有不同，但是產出的資料結果是一樣的，

至於使用上要使用哪一種？其實也沒有說哪種比較好，就看自己比較習慣那一種就用哪一種吧…

產出結果：

 

前端程式中，將JSON資料轉為Array

function GetData(actionUrl)
{
  var result = new Array();
  $.ajax(
  {
    url: actionUrl,
    type: 'post',
    cache: false,
    async: false,
    dataType: 'json',
    success: function(data)
    {
      if(data)
      {
        $.each(data, function(i, item)
        {
          var inner = 
          {
            ProductID : item.ProductID,
            ProductName : item.ProductName,
            CategoryID : item.CategoryID,
            CategoryName : item.CategoryName,
            SupplierID : item.SupplierID,
            CompanyName : item.CompanyName,
          }
          result.push(inner);
        });
      }
    }
  });
      
  return result;
}

這邊我是用jQuery的$.Ajax()去向後端取得JSON資料來源，當取到資料後就使用了$.each()以及 push() 方法，

$.each() 是去逐一遍歷JSON資料，將一筆筆的JSON資料置入到一個物件之中，

一個物件建立好並置入欄位資料後再去使用 push() 方法把物件給放到預先已建立的Array中。

ps. push()方法是原生的JavaScript的方法。

 

為什麼一定要把JSON資料轉為Array呢？

如果說從後端取得JSON資料後並沒有去做額外的處理，而只是單純的把JSON資料給呈現在頁面上，那就不需要大費周章的把JSON資料去轉為Array，

之所以要轉為Array，是因為前端語言中物件陣列的操作比單純使用JSON資料的操作要更容易，畢竟JSON資料是用於前後端資料交換使用，

不論是前端還是後端，要對JSON資料做進一步的處理都還是要先做轉換的動作。

 

在這邊我簡單的做的一個應用，把轉換為Array的資料給呈現在頁面上，

function ReadAllProducts(actionUrl)
{
  var result = GetData(actionUrl);
            
  var details = result.length + "<hr/>";
  $.each(result, function(i, item)
  {
    details += item["ProductID"] + "|" + item["ProductName"] + "|"  + item["CategoryID"] + "|" + item["CategoryName"] + "|"+ item["SupplierID"] + "|"+ item["CompanyName"] + "|"+"<br/>";
  });
  $('#Products').html(details);
}

頁面上的呈現：

 

篩選Array的資料

在前端程式中要對Array的資料做篩選的處理，jQuery有提供一個方法就是 $.grep()，這是用來過濾Array中的資料，把符合條件的資料給取出。

jQuery.grep()

http://api.jquery.com/jQuery.grep/

這邊要特別的注意一下 $.grep() 中的 function部分，「jQuery.grep( array, function(elementOfArray, indexInArray) [, invert] )」

因為常用$.each() 的情況下，在 $.each() 中的function部分是 function(index, element) 而 $.grep() 的 fumction則是相反的，

function(elementOfArray, indexInArray)

在使用$.grep()方法時要特別留意這個地方，不要寫錯了而一直偵錯卻找不出原因，這裡就是常常發生問題的地方。

function GrepData()
{
  var result = GetData(ActionUrls.GetProducts);
  var currentData = $.grep(result, function(item, i)
  {
    return item["CategoryID"] == "1" && item["SupplierID"] == "16";
  });
  var details = currentData.length + "<hr/>";
  $.each(currentData, function(i, item)
  {
    details += item["ProductID"] + "|" + item["ProductName"] + "|"  + item["CategoryID"] + "|" + item["CategoryName"] + "|"+ item["SupplierID"] + "|"+ item["CompanyName"] + "|"+"<br/>";
  });
  $('#Products').html(details);
}

在上面的程式中，我們要篩選出符合兩個條件的資料，分別是 CategoryID == 1 以及 SupplierID == 16，最後再顯示到頁面上。

執行結果：

 

上面簡單說明了要如何把接收的JSON資料轉換維Array，並且更進一步做篩選的處理，

對於前端資料的處理，這些資料轉換與篩選的操作是經常會使用到的，所以要熟記這些前端處理的操作。

 

jQuery API 參考連結：

jQuery.ajax()：http://api.jquery.com/jQuery.ajax/

jQuery.getJSON()：http://api.jquery.com/jQuery.getJSON/

jQuery.each()：http://api.jquery.com/jQuery.each/

JavaScript push() Method：http://www.w3schools.com/jsref/jsref_push.asp

jQuery.grep()：http://api.jquery.com/jQuery.grep/

 

以上