如何制作将 JSON 数据插入 HTML 的 XMLHttpRequest？答案

【问题标题】：How to make an XMLHttpRequest that inserts JSON data into HTML?如何制作将 JSON 数据插入 HTML 的 XMLHttpRequest？
【发布时间】：2017-06-12 06:55:18
【问题描述】：

嘿，我正在尝试制作 XMLHttpRequest 来获取 JSON ，然后 inserts 将其特定字段插入 HTML。

例如只插入 Angelo 他的 name 、 lastname 和 age 的数据，每个字段在不同的 HTML 元素中

问题是我无法在 HTML 元素中获取正确的数据，它在 HTML 元素中一直显示为 undefined name

我的老板不允许我使用 jQuery

HTML

<h2>Nombre</h2>
<h3 class="name" id="name">Alex</h3>
<br>
<h2>Segundo Nombre</h2>
<h3 class="lastname">Synshit</h3>
<br>
<h2>Edad</h2>
<h3 class="age">199</h3>

function loadProfile(){

  var xmlhttp = new XMLHttpRequest();
  var url = "../json/perfil.json";

  xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      var myArr = JSON.parse(this.responseText);
      document.getElementById("name").innerHTML=myArr[0];
      }
  };

  xmlhttp.open("GET", url, true);
  xmlhttp.send();


}

JSON

{
    "angelo":{
            "Name":"Angelo",
            "LastName":"Giuseppe",
            "Age":19
        },

      "hugo":{
            "Name":"Hugo",
            "LastName":"Dóminguez",
            "Age":25
        },

      "edgar":{
            "Name":"Edgar",
            "LastName":"Villareal",
            "Age":35
            },

        "salvador":{
            "Name":"Salvador",
            "LastName":"Ramirez",
            "Age":20
            }
}

【问题讨论】：

标签： javascript html json request xmlhttprequest

【解决方案1】：

在document.getElementById("name").innerHTML=myArr[0]; 行上，您正在索引一个数组，但您的 JSON 文件包含一个对象。您必须将其更改为 myArr.angelo 或更改您的 JSON 文件以包含一个数组。

【讨论】：

让我试试这个
使用 myArr.angelo 在 HTML 中返回下一个：“[object Object]”，但不是名称 mmmm
因为您正在访问对象，所以您必须更深一层。 myArr.angelo.Name。以集合的形式设计你的 json
没错，它成功了！，你知道我怎样才能让“myArr.angelo.Name”的一部分动态吗？例如angelo是一个变量
angelo 已经是一个变量，您可以编辑该值，它会更改您的本地副本，但我强烈建议您按照@Riz 显示的方式格式化您的 JSON。我很乐意提供帮助，如果您认为我解决了您的问题，您可以将我的答案标记为解决方案

【解决方案2】：

您格式化 json 的方式不正确。像这样设计你的json，你应该可以访问你现在访问的方式。

[
  {
    "Name": "Angelo",
    "LastName": "Giuseppe",
    "Age": 19
  },
  {
    "Name": "Hugo",
    "LastName": "Dóminguez",
    "Age": 25
  },
  {
    "Name": "Edgar",
    "LastName": "Villareal",
    "Age": 35
  },
  {
    "Name": "Salvador",
    "LastName": "Ramirez",
    "Age": 20
  }
]

【讨论】：

没错，这对数字有用，谢谢！ :)