JavaScript - 使用XMLHttpRequest选择数据

时间:2017-06-21 11:24:13

标签: javascript arrays json xmlhttprequest element

我的代码出现问题,我需要从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)"),但会删除所有其余名称名字。知道为什么会这样吗?

1 个答案:

答案 0 :(得分:-1)

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

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

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

请查看此

相关问题