javascript - 使用 Jquery 重新格式化 json 数据

Question

我需要转换以下 JSON 数据:

var response = {
   "data":    {
      "List":       [
                  {
            "Name": "Mary",
            "state": "AZ",
            "Matriculation": "complete",
            "Graduation": "complete",
            "Masters": "complete",
            "Phd": "notStarted"
         },
                  {
            "Name": "Stephanie",
            "state": "CT",
            "Matriculation": "complete",
            "Graduation": "complete",
            "Masters": "complete",
            "Phd": "notStarted"
         },
         {
            "Name": "John",
            "state": "CT",
            "Matriculation": "complete",
            "Graduation": "planning",
            "Masters": "notStarted",
            "Phd": "notStarted"
         }]
   }
}

使用 jQuery 进入以下内容:

[ 
   {  
   "state":"AZ",
      "Matriculation":[  
         {  
            "Name":"Mary",
            "status":"complete"
         }
      ],
      "Graduation":[  
         {  
            "Name":"Mary",
            "status":"complete"
         }
      ], 
      "Masters":[  
         {  
            "Name":"Mary",
            "status":"complete"
         }
      ],
      "Phd":[  
         {  
            "Name":"Mary",
            "status":"notStarted"
        }
      ] 
   }, 
   {  
      "state":"CT",
      "Matriculation":[  
         {  
            "Name":"Stephanie",
            "status":"complete"
         },
         {  
            "Name":"John",
            "status":"complete"
         }
      ],
      "Graduation":[  
         {  
            "Name":"Stephanie",
            "status":"complete"
         },
         {  
            "Name":"John",
            "status":"planning"
         }
      ], 
      "Masters":[  
         {  
            "Name":"Stephanie",
            "status":"complete"
         },
         {  
            "Name":"John",
            "status":"notStarted"
         }
      ],
      "Phd":[  
         {  
            "Name":"Stephanie",
            "status":"notStarted"
         },
         {  
            "Name":"John",
            "status":"notStarted"
         }
      ]                 
   }
]

这是我迄今为止尝试过的，但进展为零。我试图首先在一个州实现这一目标。

这是 fiddle : http://jsfiddle.net/sqgdyk6f/

感谢任何指导。我是 JSON 操作新手。

提前致谢!

Answer 1

您应该做的第一件事是分析您的源格式和目标格式。

• 您的源格式只是个人对象的数组。

• 您的目的地格式是按州对人员进行分组的对象并分为某些类别。

接下来，考虑如何将源转移到此目的地。

您将需要迭代源中的每个人，并尝试将其添加到您的状态数组中。现在，我想说您的目标格式有点特殊，但是通过编写几个辅助函数，您可以实现该格式。

再次查看您的目标格式。它是一个对象数组。该数组中每个对象的一部分是一个名为 state 的属性，该属性具有该对象表示的状态的值。您将需要一个函数来查看该数组以查找特定状态，并为您返回现有对象。如果状态不存在，它应该为您向数组添加一个新条目并返回该条目。

由于 JSON 只是表示 JavaScript 对象表示法，并且您实际上正在使用 JavaScript 对象，因此您应该创建一个对象来对目标数组的每个条目进行建模。我将把这些称为 StateSummary。

function StateSummary(state) {
    this.state = state;
    this.Matriculation = [];
    this.Graduation = [];
    this.Masters = [];
    this.Phd = [];
}

您能看到该对象如何表示目标数组中的每个条目吗？

现在您已经有了一个对每个条目进行建模的对象，我们需要一个函数来检查特定状态的条目是否已存在。如果存在，它将返回该对象。如果不存在，则会向数组添加一个新对象，并返回这个新对象。

function addOrGetState(array, state) {
    for (var i = 0; i < array.length; i++) {
        var obj = array[i];

        if (obj.state === state)
            return obj;
    }

    //If the function got here, then it didn't find a matching state.
    var obj = new StateSummary(state);
    array.push(obj); //Add the new object to the array.
    return obj; //Return the new object.
}

因此，现在您可以从目标数组中按状态获取条目，并且可以创建新条目。

继续创建一个函数，将一个人添加到 StateSummary 对象中。

function addPersonToStateSummary(person, stateSummary) {
    stateSummary.Matriculation.push({ Name: person.Name, status: person.Matriculation });
    stateSummary.Graduation.push({ Name: person.Name, status: person.Graduation});
    stateSummary.Masters.push({ Name: person.Name, status: person.Masters});
    stateSummary.Phd.push({ Name: person.Name, status: person.Phd});
}

最后一部分是迭代源数组，并将数据整理到目标数组中。

var sourceArray = response.data.List; //You provided this.
var destinationArray = []; //Allocate a new array to put stuff in.

for (var i = 0; i < sourceArray.length; i++) {
    var person = sourceArray[i]; //Each entry of the source array represents a person.

    var stateSummary = addOrGetState(destinationArray, person.state);

    addPersonToStateSummary(person, stateSummary);
}

这应该会给你你正在寻找的东西。 我希望这个分解能教你如何以分析的方式思考问题，首先分解其步骤，然后用代码解决它们。

这是一个演示:

var response = {
  "data": {
    "List": [{
      "Name": "Mary",
      "state": "AZ",
      "Matriculation": "complete",
      "Graduation": "complete",
      "Masters": "complete",
      "Phd": "notStarted"
    }, {
      "Name": "Stephanie",
      "state": "CT",
      "Matriculation": "complete",
      "Graduation": "complete",
      "Masters": "complete",
      "Phd": "notStarted"
    }, {
      "Name": "John",
      "state": "CT",
      "Matriculation": "complete",
      "Graduation": "planning",
      "Masters": "notStarted",
      "Phd": "notStarted"
    }]
  }
};

function StateSummary(state) {
  this.state = state;
  this.Matriculation = [];
  this.Graduation = [];
  this.Masters = [];
  this.Phd = [];
}

function addOrGetState(array, state) {
  for (var i = 0; i < array.length; i++) {
    var obj = array[i];

    if (obj.state === state)
      return obj;
  }

  //If the function got here, then it didn't find a matching state.
  var obj = new StateSummary(state);
  array.push(obj); //Add the new object to the array.
  return obj; //Return the new object.
}


function addPersonToStateSummary(person, stateSummary) {
  stateSummary.Matriculation.push({
    Name: person.Name,
    status: person.Matriculation
  });
  stateSummary.Graduation.push({
    Name: person.Name,
    status: person.Graduation
  });
  stateSummary.Masters.push({
    Name: person.Name,
    status: person.Masters
  });
  stateSummary.Phd.push({
    Name: person.Name,
    status: person.Phd
  });
}


var sourceArray = response.data.List; //You provided this.
var destinationArray = []; //Allocate a new array to put stuff in.

for (var i = 0; i < sourceArray.length; i++) {
  var person = sourceArray[i]; //Each entry of the source array represents a person.

  var stateSummary = addOrGetState(destinationArray, person.state);

  addPersonToStateSummary(person, stateSummary);
}

document.getElementById('result').innerHTML = JSON.stringify(destinationArray);

<div id="result"></div>