Question

我正在阅读JSON对象并以html格式显示表格格式的名称和文字，但无法使用javascript获取节点的父名称

{
    "A": {
        "B": "Text",
        "C": "Text",
        "D": {
            "D1": "Text",
            "D2": {
                "D4": "Text",
                "D3": "Text"
            }
        },
        "E": {
            "E1": {
                "E2": {
                    "E3": "Text"
                }
            }
        }
    }
}

表就像这样

B      Text   
C      Text   
D1     Text    
D4     Text   
D3     Text   
E3     Text

但我需要将父姓名附加到这样的孩子

A_B   Text   
A_C   Text   
A_D_D1   Text  
A_D_D2_D3   Text  
A_D_D2_D4   Text   
A_E_E1_E2_E3   Text

您能否建议我如何向子节点添加父名称

<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
</div>
    <script type="text/javascript">
        var html = '<table  border="1">';

var contextObj={"A":{"B":"Text","C":"Text","D":{"D1":"Text","D2":{"D4":"Text","D3":"Text"}},"E":{"E1":{"E2":{"E3":"Text"}}}}};

html = getKeyValueJson(contextObj, html);
html +='</table>';
$('div').html(html);

function getKeyValueJson(obj, html) {
 
  $.each(obj, function(key, value) {
    value = parseIt(value) || value;
    
    if (value == null) {
      return
    }
  
    if (typeof value == 'object') {

      html = getKeyValueJson(value, html);

    } else {

	html +='<tr>'
      html += '<td>' + key + '</td> <td>' + value + '</td></tr>';

    }
  });
  return html;
}

function parseIt(str) {
  try { return JSON.parse(str);  } catch(e) { return false; }
}
    </script>
</body>
</html>

Answer 1

一个简单的递归函数将给定节点n减少为键列表

var x = {"A":... // from your example data
function gather(n, prefix, acc) {
    if (typeof n !== "object") {
        acc[prefix] = n;
        return acc;
    }
    for ( k in n ) {
        gather( n[k], (prefix ? [prefix, k].join("_") : k), acc );
    }
    return acc;
}
console.log( "OUTCOME=", gather(x, "", {});

所示：

acc= { A_B: 'Text',
  A_C: 'Text',
  A_D_D1: 'Text',
  A_D_D2_D4: 'Text',
  A_D_D2_D3: 'Text',
  A_E_E1_E2_E3: 'Text' }

Answer 2

为函数添加前缀参数，并将当前密钥附加到前缀。

＆＃13;

var html = '<table  border="1">';

var contextObj={"A":{"B":"Text","C":"Text","D":{"D1":"Text","D2":{"D4":"Text","D3":"Text"}},"E":{"E1":{"E2":{"E3":"Text"}}}}};

html = getKeyValueJson(contextObj, html);
html += '</table>';
$('div').html(html);

function getKeyValueJson(obj, html, prefix) {
  prefix = prefix ? prefix + "_" : "";

  $.each(obj, function(key, value) {
    value = parseIt(value) || value;

    if (value == null) {
      return
    }

    if (typeof value == 'object') {

      html = getKeyValueJson(value, html, prefix + key);

    } else {

      html += '<tr>'
      html += '<td>' + prefix + key + '</td> <td>' + value + '</td></tr>';

    }
  });
  return html;
}

function parseIt(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    return false;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
</div>

＆＃13;

使用javascript

2 个答案: