javascript - 使用 Object.keys 从 JavaScript 中 JSON 文件中的值获取的多维数组

Question

基于问题https://pt.stackoverflow.com/questions/323738/como-incluir-arquivo-json-dentro-de-um-js（葡萄牙语），但他没有数组，我有一个数组. 我应用了它，并且由于缺少他没有的数组，因此未定义变量。

您可以测试使用来运行预览。

我也尝试应用这些问题：

1. 获取json对象的大小

2. 来自 JSON 对象的多维数组

   • 首先在 HTML 文件中：

  <p id="name">Name 1</p>
  <p id="age">Age 1</p>
  <p id="name">Name 2</p>
  <p id="age">Age 2</p>
  <p id="name">Name 3</p>
  <p id="age">Age 3</p>
  <p id="name">Name 4</p>
  <p id="age">Age 4</p>
  <p id="name">Name 5</p>
  <p id="age">Age 5</p>

• JSON：

{
  "people": 
  [
    {
      "id": 0,
      "name": "Person Name 0",
      "age": 15
    },
    {
      "id": 1,
      "name": "Person Name 1",
      "age": 25
    },
    {
      "id": 2,
      "name": "Person Name 2",
      "age": 35
    },
    {
      "id": 3,
      "name": "Person Name 3",
      "age": 45
    },
    {
      "id": 4,
      "name": "Person Name 4",
      "age": 55
    },
    {
      "id": 5,
      "name": "Person Name 5",
      "age": 60
    }
  ]
}

• 基于葡萄牙语中的那个问题，例如：

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.overrideMimeType("application/json");
  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4 && rawFile.status == "200") {
          callback(rawFile.responseText);
      }
  }
  rawFile.send(null);
}

readTextFile("../json/people.json", function(text)
{
  var people = JSON.parse(text);

  var name = document.getElementById('name');
  name.innerHTML = people.name;

  var age = document.getElementById('age');
  age.innerHTML = people.age;

  console.log(people);


});

• 或使用Object.keys，例如：

readTextFile("../json/people.json", function(text){
  var people = JSON.parse(text);

  var name = document.getElementById('name');
  name.innerHTML = Object.keys(people.name).length;

  var age = document.getElementById('age');
  age.innerHTML = Object.keys(people.age).length;

  console.log(people);


});

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.overrideMimeType("application/json");
  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4 && rawFile.status == "200") {
          callback(rawFile.responseText);
      }
  }
  rawFile.send(null);
}

readTextFile("https://pastebin.com/raw/CzxURs8y", function(text)
{
  var people = JSON.parse(text);

  var name = document.getElementById('name');
  name.innerHTML = people.name;

  var age = document.getElementById('age');
  age.innerHTML = people.age;

  console.log(people);


});

  <p id="name">Name 1</p>
  <p id="age">Age 1</p>
  <p id="name">Name 2</p>
  <p id="age">Age 2</p>
  <p id="name">Name 3</p>
  <p id="age">Age 3</p>
  <p id="name">Name 4</p>
  <p id="age">Age 4</p>
  <p id="name">Name 5</p>
  <p id="age">Age 5</p>

标签： javascripthtmlarraysjson

Answer 1

fetch("../json/people.json")
    .then(r=>r.json())
    .then(json=>{
        const nameElms = Array.from(document.querySelectorAll("[id='name']"));
        const ageElms = Array.from(document.querySelectorAll("[id='age']"));
        nameElms.forEach((n,i)=>{
            const person = json.people[i];
            n.textContent = person.name;
        })
        ageElms.forEach((n,i)=>{
            const person = json.people[i];
            n.textContent = person.age;
        })
    })