javascript - d3.js 结合了两种具有相同属性的不同类型的 json 文件

Question

我对组合两种不同类型的 json 文件感到困惑。 因为我想构建一个使用相同属性连接每个 json 文件的 json 文件。所有这些都是基于 d3.js 结构。

第一个json文件如下所示:

[{"status":"Active",
  "name":"public",
  "router:external":true,
  "original_status":"ACTIVE",
  "id":"dfc69b95-915f-475c-8800-db6c4e15c290"},
 {"status":"Active",
  "name":"UTAH",
  "router:external":false,
  "original_status":"ACTIVE",
  "id":"1b12abc7-6f69-493d-b95a-8fd9f8d15643"},
 {"status":"Active",
  "name":"USCB",
  "router:external":false,
  "original_status":"ACTIVE",
  "id":"5280be34-8e77-457c-856d-cd9776841cda"},
 {"status":"Active",
  "name":"UCLA",
  "router:external":false,
  "original_status":"ACTIVE",
  "id":"82d4cc54-471b-456e-8c28-da04226ee344"},
 {"status":"Active",
  "name":"SRI",
  "router:external":false,
  "original_status":"ACTIVE",
  "id":"e802c8fe-b30e-40c8-8f1d-fb8631bb0601"}
]

第二个json文件如下所示:

{
"SRI": [-122.18219, 37.45383],
"USCB": [-119.69819, 34.42083],
"UCLA": [-118.24368, 34.05223],
"UTAH": [-111.89105, 40.76078]
}

如你所见，相同的属性是name，所以我想用name建立连接并合并一个json文件，它有一个坐标属性。就像这样:

[{"status":"Active",
  "name":"public",

  "lot": null,
  "lat": null,

  "router:external":true,
  "original_status":"ACTIVE",
  "id":"dfc69b95-915f-475c-8800-db6c4e15c290"},
 {"status":"Active",
  "name":"UTAH",

  "lot":"-111",
  "lat":"40",

  "router:external":false,
  "original_status":"ACTIVE",
  "id":"1b12abc7-6f69-493d-b95a-8fd9f8d15643"},
....

你能告诉我如何实现这个吗？感谢您的所有想法。

Answer 1

这个问题与 D3 无关，您可以使用纯 JavaScript 来完成。

假设第一个JSON命名为json1，第二个命名为json2，你可以这样做:

json1.forEach(function(d){
    d.lat = json2[d.name] ? json2[d.name][1] : null;
    d.lon = json2[d.name] ? json2[d.name][0] : null
});

这将基于 json2 在 json1 对象中创建新属性。

这是演示:

var json1 = [{
  "status": "Active",
  "name": "public",
  "router:external": true,
  "original_status": "ACTIVE",
  "id": "dfc69b95-915f-475c-8800-db6c4e15c290"
}, {
  "status": "Active",
  "name": "UTAH",
  "router:external": false,
  "original_status": "ACTIVE",
  "id": "1b12abc7-6f69-493d-b95a-8fd9f8d15643"
}, {
  "status": "Active",
  "name": "USCB",
  "router:external": false,
  "original_status": "ACTIVE",
  "id": "5280be34-8e77-457c-856d-cd9776841cda"
}, {
  "status": "Active",
  "name": "UCLA",
  "router:external": false,
  "original_status": "ACTIVE",
  "id": "82d4cc54-471b-456e-8c28-da04226ee344"
}, {
  "status": "Active",
  "name": "SRI",
  "router:external": false,
  "original_status": "ACTIVE",
  "id": "e802c8fe-b30e-40c8-8f1d-fb8631bb0601"
}];

var json2 = {
  "SRI": [-122.18219, 37.45383],
  "USCB": [-119.69819, 34.42083],
  "UCLA": [-118.24368, 34.05223],
  "UTAH": [-111.89105, 40.76078]
};

json1.forEach(function(d) {
  d.lat = json2[d.name] ? json2[d.name][1] : null;
  d.lon = json2[d.name] ? json2[d.name][0] : null
});

console.log(json1);