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]
}

正如您所看到的，相同的属性是名称，因此我想使用该名称来构建连接并组合一个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
});

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

以下是演示：

＆＃13;

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);

＆＃13;

Answer 2

var first = [{"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 second = {
"SRI": [-122.18219, 37.45383],
"USCB": [-119.69819, 34.42083],
"UCLA": [-118.24368, 34.05223],
"UTAH": [-111.89105, 40.76078]
}

var res = first.map(d => {
    if(second[d.name]) {
    let arr = second[d.name];
    d.lat = arr[0];
    d.lom = arr[1];
  }
  else {
    d.lat = null;
    d.lon = null;
  }
  return d; 
});

console.log(res);

工作小提琴：https://jsfiddle.net/GunnerSS/dvu0L463/

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

2 个答案: