使用javascript从json对象获取父名称

getting parent names from json object using javascript

本文关键字：获取 对象 javascript json 使用      更新时间：2023-09-26

我正在读取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>

一个简单的递归函数将给定节点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' }

向函数添加前缀参数，并将当前键附加到前缀。

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;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
</div>

相关文章：