JavaScript：JSON 属性到 html 内容使用.forEach

Question

我的JSON数据变量是this.responseText ：

{
  'nav': '<a href="">a</a><a href="">b</a>',
  'content': '<div>tartalom</div>',
  'akarmi': 'hello'
}

我想使用.foreach循环而不是：

document.getElementById("nav").innerHTML = '<a href="">a</a><a href="">b</a>';
document.getElementById("content").innerHTML = '<div>tartalom</div>';
document.getElementById("akarmi").innerHTML = 'hello';

Answer 1

您可以使用Object.entries如下：

 const res = { 'nav': '<a href="">a</a><a href="">b</a>', 'content': '<div>tartalom</div>', 'akarmi': 'hello' }; Object.entries(res).forEach(([elemId,htmlContent]) => { const elem = document.getElementById(elemId); if(elem) elem.innerHTML = htmlContent; });

 <div id="nav"></div> <div id="content"></div> <div id="akarmi"></div>

Answer 2

它的作品：谢谢。 JSON.parse()

Object.entries(JSON.parse(this.responseText)).forEach(([elemId,htmlContent]) => {

Answer 3

索引.html

<html>
<head>
<script src="script.js"></script>
</head>
<body onload="javascript:ajax();">
<div id="nav"></div>
<div id="content"></div>
<div id="akarmi"></div>
</body>
</html>

脚本.js

function ajax () {

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {

        if(this.readyState == 4 && this.status == 200) {

            Object.entries(this.responseText).forEach(([elemId,htmlContent]) => {
                const elem = document.getElementById(elemId);
                if(elem) elem.innerHTML = htmlContent;
            });

        }

    };

    xhttp.open ("GET", "foo.php", true);
    xhttp.send ();

}

foo.php

{
  'nav': '<a href="">a</a><a href="">b</a>',
  'content': '<div>tartalom</div>',
  'akarmi': 'hello'
}

JavaScript：JSON 属性到 html 内容使用.forEach

问题描述

3 个解决方案

解决方案1
2 已采纳 2021-01-31 21:07:53

解决方案2
0 2021-01-31 22:17:08

解决方案3
-1 2021-01-31 21:25:26

JavaScript：JSON 属性到 html 内容使用.forEach

问题描述

3 个解决方案

解决方案1 2 已采纳 2021-01-31 21:07:53

解决方案2 0 2021-01-31 22:17:08

解决方案3 -1 2021-01-31 21:25:26

解决方案1
2 已采纳 2021-01-31 21:07:53

解决方案2
0 2021-01-31 22:17:08

解决方案3
-1 2021-01-31 21:25:26