复杂 JSON 上的最小循环使用

Minimal Loop usage on complex json

本文关键字：小循环 JSON 复杂      更新时间：2023-09-26

$("<div>", {class: "wrapper"}).append(
        $("<div>", {class: "LeftSection"}).append(
            $("<div>", {class: "MyMainSavings"}).append(
				$("<div>", {class: "MyMainSavingsTop"}).append($("<table>",{class: "MyMainSavingsTop"})).append($("<table>")),
				$("<div>", {class: "MyMainSavingsBottom"}).append($("<table>",{class: "tablebottom"}))
			),
			$("<div>", {class: "MyEverydayExpenses"}).append(
				$("<div>", {class: "MyEverydayExpensesTop"}).append($("<table>",{class: "MyEverydayExpensesTop"})),
				$("<div>", {class: "MyEverydayExpensesBottom"}).append($("<table>",{class: "tablebottom"}))
			),
			$("<div>", {class: "MyDeposit"}).append(
				$("<div>", {class: "MyDepositTop"}).append($("<table>",{class: "MyDepositTop"})),
				$("<div>", {class: "MyDepositBottom"}).append($("<table>",{class: "tablebottom"}))
			),
			$("<div>", {class: "FavDeposit"}).append(
				$("<div>", {class: "FavDepositTop"}).append($("<table>",{class: "FavDepositTop"})),
				$("<div>", {class: "FavDepositBottom"}).append($("<table>",{class: "tablebottom"}))
			)
        ), 
        $("<div>", {class: "RightSection"}).append(
			$("<div>", {class: "HomeLoan"}).append(
				$("<div>", {class: "HomeLoanTop"}).append($("<table>",{class: "HomeLoanTop"})),
				$("<div>", {class: "HomeLoanBottom"}).append($("<table>",{class: "tablebottom"}))
			),
			$("<div>", {class: "Ruby"}).append(
				$("<div>", {class: "RubyTop"}).append($("<table>",{class: "RubyTop"})),
				$("<div>", {class: "RubyBottom"}).append($("<table>",{class: "tablebottom"}))
			),
			$("<div>", {class: "MyOverdraft"}).append(
				$("<div>", {class: "MyOverdraftTop"}).append($("<table>",{class: "MyOverdraftTop"})),
				$("<div>", {class: "MyOverdraftBottom"}).append($("<table>",{class: "tablebottom"}))
            )
    )).appendTo("body")

我正在尝试遍历以下 complx json 结构的每个内部元素。但是，我使用的 for 和每个循环都不够好。我需要指向某个键，例如。MyMainSavings Top，并在jquery中获取该键的名称。

     var mainObject = {
     "Main": [{
      "I_Have": [{
      "typeofAcc": "casa",
      "key": "MyMainSavings",
      "MyMainSavings": {
        "MyMainSavingsTop": {
          "AccountName": "MyMainSavings",
          "AccountNumber": "x726",
          "Balance": "USD 5,600.00",
          "Rate": ""
        },
        "MyMainSavingsBottom": [{
          "Available": "Available",
          "Value": "$4329"
        }, {
          "Clear": "Clear",
          "Value": "$3456"
        }, {
          "Hold": "Hold",
          "Value": "$5000"
        }]
      }
        }, {
      "key": "MyEverydayExpenses",
      "MyEverydayExpenses": {
        "MyEverydayExpensesTop": {
          "AccountName": "MyMainSavings",
          "AccountNumber": "x726",
          "Balance": "USD 600.00",
          "Rate": ""
        },
        "MyEverydayExpensesBottom": [{
          "Available": "Available",
          "Value": "$4329"
        }, {
          "Clear": "Clear",
          "Value": "$3456"
        }, {
          "Hold": "Hold",
          "Value": "$7300"
        }]
      }
        }, {
      "key": "FavDeposit",
      "FavDeposit": {
        "FavDepositTop": {
          "AccountName": "MyMainSavings",
          "AccountNumber": "x726",
          "Balance": "USD 5,000.00",
          "Rate": "@4.5%"
        },
        "FavDepositBottom": [{
          "MaturityValue": "Maturity Value",
          "Value": "$4009"
        }, {
          "Term": "Term",
          "Value": "$1156"
        }, {
          "MaturesOn": "Matures On",
          "Value": "$5000"
        }]
      }
       }, {
      "key": "MyDeposit",
      "MyDeposit": {
        "MyDepositTop": {
          "AccountName": "MyMainSavings",
          "AccountNumber": "x726",
          "Balance": "USD 8,600.00",
          "Rate": "@4.5%"
        },
        "MyDepositBottom": [{
          "MaturityValue": "Maturity Value",
          "Value": "$4329"
        }, {
          "Term": "Term",
          "Value": "$3456"
        }, {
          "MaturesOn": "Matures On",
          "Value": "$5000"
        }]
      }
    }]
     }, {
    "I_Owe": [
      {
        "key": "HomeLoan",
        "HomeLoan": {
          "HomeLoanTop": {
            "AccountName": "MyMainSavings",
            "AccountNumber": "x726",
            "Balance": "USD 5,600.00",
            "Rate": "@4.5% floating"
          },
          "HomeLoanBottom": [{
            "Installment": "Installment",
            "Value": "$4329"
          }, {
            "Disbursed": "Disbursed",
            "Value": "$3456"
          }, {
            "CurrentDues": "Current Dues",
            "Value": "$5000"
          }]
        }
      }, {
        "key": "Ruby",
        "Ruby": {
          "RubyTop": {
            "AccountName": "MyMainSavings",
            "AccountNumber": "x726",
            "Balance": "USD 600.00",
            "Rate": ""
          },
          "RubyBottom": [{
            "$6500 Dues": "$6500 Dues",
            "Value": "$4329"
          }, {
            "Minimum Due": "Minimum Due",
            "Value": "$3456"
          }, {
            "Unbilled": "Unbilled",
            "Value": "$7300"
          }]
        }
      }, {
        "key": "MyOverdraft",
        "MyOverdraft": {
          "MyOverdraftTop": {
            "AccountName": "MyMainSavings",
            "AccountNumber": "x726",
            "Balance": "USD 5,000.00",
            "Rate": ""
          },
          "MyOverdraftBottom": [{
            "Available": "Available",
            "Value": "$4009"
          }, {
            "Unclear": "Unclear",
            "Value": "$1156"
          }, {
            "Sanc_Limit": "Sanc. Limit",
            "Value": "$5000"
          }]
        }
      }
      ]
     }]
     }
我尝试了以下方法：
$.each(mainObject, function(key, v) {
      if (mainObject.hasOwnProperty(v)) {
        var val = mainObject[v];
        var table123 = $('<table></table>') //.addClass('MyMainSavingsTop');
        for (i = 0; i < this.key.length; i++) {
          var row = $('<tr></tr>').text(this.v);
          table123.append(row);
        }
      }

Edit根据新信息，我创建了一些东西，用于根据给定的结构和所描述的内容将单元格添加到表中。 可以做更多的事情，但没有更多关于你需要的信息，这有点困难。 查看我的代码的这个jsfiddle。

斯菲德尔

注意 要在链接中使用 jsfiddle 在附加容器后删除任何内容。 jsFiddle 中的 JS 将根据需要附加所有内容。

例： $("<div>", {class: "LeftSection"}).append( $("<div>", {class: "MyMainSavings"}), $("<div>", {class: "MyEverydayExpenses"}) )

以下仅供参考，可能对某人有用

递归方法可能会很好

function getSubItems(obj, key, wrap) {
  var result;
  var arr;
  switch (obj.constructor.name) {
    case "Object":
      arr = Object.keys(obj).map(function(k) {
        if (k == key)
          return {
            __wrapper: obj[k]
          };
        return getSubItems(obj[k], key, true);
      });
      break;
    case "Array":
      arr = obj.map(function(i) {
        return getSubItems(i, key, true)
      })
      break;
  }
  if (arr)
    if (arr.length > 0)
      result = arr
      .filter(function(item) {
        if (item)
          if (item.constructor)
            return item.constructor.name === "Object";
      })[0]
  if (result)
    if (result.__wrapper && wrap === undefined)
      return result.__wrapper
  return result;
}

上面的代码获取一个对象（或数组）并对其进行解析以查找具有指定键的对象。 此代码假定对象中仅存在 1 个该名称的键。 要使用此功能，请运行以下命令：

getSubItem(myMainObj, "KeyToSearchFor")

相关文章：