【问题标题】:JavaScript - Picking data with XMLHttpRequestJavaScript - 使用 XMLHttpRequest 选择数据
【发布时间】:2017-11-24 06:41:19
【问题描述】:

我的代码有问题,我需要使用来自 API 的 JSON 查询来选择数据。

这是我从查询中收到的 JSON 正文:

{
  "status": "success",
  "reservations": [
    {
      "id": "38199",
      "subject": "Koneiden vaihto",
      "modifiedDate": "2017-05-16T12:46:17",
      "startDate": "2017-06-21T08:00:00",
      "endDate": "2017-06-21T22:00:00",
      "resources": [
        {
          "id": "124",
          "type": "room",
          "code": "FRAMIF407",
          "parent": {
            "id": "4",
            "type": "building",
            "code": "FramiF",
            "name": "Frami F"
          },
          "name": "Frami F407 (atk 34)"
        }
      ],
      "description": ""
    },
    {
      "id": "30505",
      "subject": "Alumnitapahtuman etukäteisjärjestelyt",
      "modifiedDate": "2017-04-19T09:36:02",
      "startDate": "2017-06-21T08:00:00",
      "endDate": "2017-06-21T22:00:00",
      "resources": [
        {
          "id": "104",
          "type": "room",
          "code": "FRAMIF144",
          "parent": {
            "id": "4",
            "type": "building",
            "code": "FramiF",
            "name": "Frami F"
          },
          "name": "Frami F144 (lasipalatsi 120)"
        }
      ],
      "description": ""
    },
    {
      "id": "38864",
      "subject": "Koneiden vaihto/säilytystila",
      "modifiedDate": "2017-06-21T06:03:07",
      "startDate": "2017-06-21T08:00:00",
      "endDate": "2017-06-21T22:00:00",
      "resources": [
        {
          "id": "107",
          "type": "room",
          "code": "FRAMIF211",
          "parent": {
            "id": "4",
            "type": "building",
            "code": "FramiF",
            "name": "Frami F"
          },
          "name": "Frami F211 (fysioterapia/teoria)"
        }
      ],
      "description": ""
    },
    {
      "id": "38335",
      "subject": "Koneiden vaihto",
      "modifiedDate": "2017-05-16T12:48:32",
      "startDate": "2017-06-21T08:00:00",
      "endDate": "2017-06-21T22:00:00",
      "resources": [
        {
          "id": "127",
          "type": "room",
          "code": "FRAMIF410",
          "parent": {
            "id": "4",
            "type": "building",
            "code": "FramiF",
            "name": "Frami F"
          },
          "name": "Frami F410 (atk 34)"
        }
      ],
      "description": ""
    },
    {
      "id": "38426",
      "subject": "Koneiden vaihto",
      "modifiedDate": "2017-05-16T12:49:25",
      "startDate": "2017-06-21T08:00:00",
      "endDate": "2017-06-21T22:00:00",
      "resources": [
        {
          "id": "128",
          "type": "room",
          "code": "FRAMIF411",
          "parent": {
            "id": "4",
            "type": "building",
            "code": "FramiF",
            "name": "Frami F"
          },
          "name": "Frami F411 (atk 34)"
        }
      ],
      "description": ""
    },
    {
      "id": "43898",
      "subject": "Varattu plinttien varastointiin",
      "modifiedDate": "2017-06-12T08:54:31",
      "startDate": "2017-06-21T08:00:00",
      "endDate": "2017-06-21T22:00:00",
      "resources": [
        {
          "id": "106",
          "type": "room",
          "code": "FRAMIF210",
          "parent": {
            "id": "4",
            "type": "building",
            "code": "FramiF",
            "name": "Frami F"
          },
          "name": "Frami F210 (teoria 36)"
        }
      ],
      "description": ""
    },
    {
      "id": "38267",
      "subject": "Koneiden vaihto",
      "modifiedDate": "2017-06-21T06:03:07",
      "startDate": "2017-06-21T08:00:00",
      "endDate": "2017-06-21T22:00:00",
      "resources": [
        {
          "id": "126",
          "type": "room",
          "code": "FRAMIF409",
          "parent": {
            "id": "4",
            "type": "building",
            "code": "FramiF",
            "name": "Frami F"
          },
          "name": "Frami F409 (atk 34)"
        }
      ],
      "description": ""
    }
  ]
}

我需要从正文中提取所有名称,例如:

"Frami F407 (atk 34)""Frami F144 (lasipalatsi 120)"

"Frami F211 (fysioterapia/teoria)", "Frami F410 (atk 34)

这是我处理数据以获取名称的方式;

var jsonQuery = {
    "startDate": startDate,
    "endDate": endDate,
    "building": [building]
};

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {

        var json = JSON.parse(xhr.responseText);
        console.log(xhr.responseText);

        var rooms = [];

        for (var i = 0; i < json.reservations.length; i++) {
            if (json.reservations[i].resources != null) {
               for (var j = 0; j < json.reservations[i].resources.length; j++) {
                   var reservation = json.reservations[i];
                   var resource = json.reservations[i].resources[j];

                   if (resource.type === "room") {
                       if (rooms.indexOf("code")) {
                           rooms.push(resource.name);
                       }
                   }
               }
           }
        }
    }
};

xhr.open("POST", "URL", true, "API-key", "");
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(jsonQuery));

它应该是这样工作的:https://jsfiddle.net/p474djan/3/

但问题是,当我通过JSON.parse() 运行它并检查控制台日志时,它会保留前两个名称("Frami F407 (atk 34)""Frami F144 (lasipalatsi 120)"),但会删除所有其余名称。知道为什么会这样吗?

【问题讨论】:

  • if (rooms.indexOf("code")) { 应该做什么?你的意思是 if (resource["code"]) { 吗?
  • (或者应该完全删除那个条件?)
  • console.dir(json); 的输出是什么,即保留了多少组?
  • xhr.responseText 的问题是否没有包含您希望收到的完整 JSON? (它与您在问题中粘贴的内容不匹配吗?)
  • @smarx 是的,xhr.responseText 仅包含前两个 "name:" 元素; "name": "Frami F407 (atk 34)" "name": "Frami F144 (lasipalatsi 120)" 和姓氏只显示为空,如; "name": ""

标签: javascript arrays json xmlhttprequest element


【解决方案1】:

我无法在您的代码上找到任何问题,但我建议您可以通过 underscore.js 实现相同的目标,而无需任何循环等

https://jsfiddle.net/p474djan/5/

document.getElementById("pageOne").innerHTML = _.pluck(_.flatten(_.pluck(json["reservations"], 'resources')), 'name').join("<br/>")

请看这里

【讨论】:

  • 虽然这个建议的代码改进可能是合理的,但它并没有解决问题中的问题。
  • 他/她在他们的代码上做了很多循环,可能会错过一些东西。不久,我查看了他们的 jsfiddle 并发布了一个解决方案,可以在没有任何循环和儿子的情况下获取名称。至少他们可以尝试。你为什么立即给出负号@smarx
  • 我投了反对票,因为“答案”应该解决发布的问题/问题。 codereview.stackexchange.com 是一个更好的地方建议对已经工作的代码进行改进。
  • 如果您想将此作为评论发布,我认为这很好。这只是一个不合适的答案。
猜你喜欢
  • 2015-08-28
  • 2011-06-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-08
  • 2020-10-31
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多