查找数组中键的所有现有值，从另一个数组中打印相应的数据
我有一个javascript对象数组，其中一些对象有一个名为＆＃34;注意＆＃34;的键。其他人没有这个属性。
我已经从javascript数组中创建了一个html表，其中（如果可用）将注释编号附加到表格单元格中的主要值，该值与对象的年份相对应国家。
我想在表格下面为每个音符打印相应的定义，具体取决于音符的值。定义将来自一个单独的js数组 - 我已经包含了摘录。总共有大约70个定义，我只想打印那些＆＃34;注意＆＃34;值存在于表中。以下是这样的截图：
我想到如何做到这一点有点困难。有什么想法吗？我很感激！
下面的完整代码：
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:Arial, sans-serif;
font-size:14px;
}
table{
border-spacing:0;
padding:0;
}
#buildcontent{
margin-left:100px;
margin-top:20px;
margin-right:100px;
}
#buildcontent table#years{
clear:both;
}
#buildcontent table#countries{
width:100%;
}
thead#years td{
border-top:1px solid #ddd;
border-bottom:0px;
font-weight:bold;
padding-top:3px;
height:18px;
padding-left:5px;
padding-right:35px;
}
th{
text-align:left;
font-weight:normal !important;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
height:25px;
padding-left:5px;
width: 90px;
}
td{
border:1px solid #ddd;
width:30px;
height:25px;
padding-left:5px;
}
tr.row-odd,
.row-odd{
background: #eee;
}
.note{
color:steelblue;
font-size:10px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<title>table with notes</title>
</head>
<body>
<div id="content">
</div>
<script>
fullData = [
{
"id": 103006,
"iso3": "AFG",
"country": "Afghanistan",
"year": 2014,
"value": 3.23,
"note": 70011
},
{
"id": 103006,
"iso3": "ALB",
"country": "Albania",
"year": 2014,
"value": 9.256,
"note": 69011
},
{
"id": 103006,
"iso3": "DZA",
"country": "Algeria",
"year": 2014,
"value": 7.611,
"note": 69011
},
{
"id": 103006,
"iso3": "AND",
"country": "Andorra",
"year": 2014,
"value": 9.582,
"note": 69111
},
{
"id": 103006,
"iso3": "AGO",
"country": "Angola",
"year": 2014,
"value": 4.726,
"note": 69011
},
{
"id": 103006,
"iso3": "ATG",
"country": "Antigua and Barbuda",
"year": 2014,
"value": 9.236,
"note": 69011
},
{
"id": 103006,
"iso3": "ARG",
"country": "Argentina",
"year": 2014,
"value": 9.834,
"note": 69411
},
{
"id": 103006,
"iso3": "ARM",
"country": "Armenia",
"year": 2014,
"value": 10.87,
"note": 70011
},
{
"id": 103006,
"iso3": "AUS",
"country": "Australia",
"year": 2014,
"value": 12.963
},
{
"id": 103006,
"iso3": "AUT",
"country": "Austria",
"year": 2014,
"value": 10.834
},
{
"id": 103006,
"iso3": "AZE",
"country": "Azerbaijan",
"year": 2014,
"value": 11.16
},
{
"id": 103006,
"iso3": "BHS",
"country": "Bahamas",
"year": 2014,
"value": 10.945
},
{
"id": 103006,
"iso3": "BHR",
"country": "Bahrain",
"year": 2014,
"value": 9.419
},
{
"id": 103006,
"iso3": "BGD",
"country": "Bangladesh",
"year": 2014,
"value": 5.073
},
{
"id": 103006,
"iso3": "BRB",
"country": "Barbados",
"year": 2014,
"value": 10.457
},
{
"id": 103006,
"iso3": "BLR",
"country": "Belarus",
"year": 2014,
"value": 11.977
},
{
"id": 103006,
"iso3": "BEL",
"country": "Belgium",
"year": 2014,
"value": 11.273
},
{
"id": 103006,
"iso3": "BLZ",
"country": "Belize",
"year": 2014,
"value": 10.488
},
{
"id": 103006,
"iso3": "BEN",
"country": "Benin",
"year": 2014,
"value": 3.3
},
{
"id": 103006,
"iso3": "BTN",
"country": "Bhutan",
"year": 2014,
"value": 3.01
},
{
"id": 103006,
"iso3": "BOL",
"country": "Bolivia (Plurinational State of)",
"year": 2014,
"value": 8.154
},
{
"id": 103006,
"iso3": "BIH",
"country": "Bosnia and Herzegovina",
"year": 2014,
"value": 8.326
},
{
"id": 103006,
"iso3": "BWA",
"country": "Botswana",
"year": 2014,
"value": 8.87
},
{
"id": 103006,
"iso3": "BRA",
"country": "Brazil",
"year": 2014,
"value": 7.66
},
{
"id": 103006,
"iso3": "BRN",
"country": "Brunei Darussalam",
"year": 2014,
"value": 8.77
},
{
"id": 103006,
"iso3": "BGR",
"country": "Bulgaria",
"year": 2014,
"value": 10.566
},
{
"id": 103006,
"iso3": "BFA",
"country": "Burkina Faso",
"year": 2014,
"value": 1.374
},
{
"id": 103006,
"iso3": "BDI",
"country": "Burundi",
"year": 2014,
"value": 2.686
},
{
"id": 103006,
"iso3": "CPV",
"country": "Cabo Verde",
"year": 2014,
"value": 4.683
},
{
"id": 103006,
"iso3": "KHM",
"country": "Cambodia",
"year": 2014,
"value": 4.369
},
{
"id": 103006,
"iso3": "CMR",
"country": "Cameroon",
"year": 2014,
"value": 5.96
},
{
"id": 103006,
"iso3": "CAN",
"country": "Canada",
"year": 2014,
"value": 13.004
},
{
"id": 103006,
"iso3": "CAF",
"country": "Central African Republic",
"year": 2014,
"value": 4.224
},
{
"id": 103006,
"iso3": "TCD",
"country": "Chad",
"year": 2014,
"value": 1.929
},
{
"id": 103006,
"iso3": "CHL",
"country": "Chile",
"year": 2014,
"value": 9.787
},
{
"id": 103006,
"iso3": "CHN",
"country": "China",
"year": 2014,
"value": 7.54
},
{
"id": 103006,
"iso3": "COL",
"country": "Colombia",
"year": 2014,
"value": 7.35
},
{
"id": 103006,
"iso3": "COM",
"country": "Comoros",
"year": 2014,
"value": 4.602
},
{
"id": 103006,
"iso3": "COG",
"country": "Congo",
"year": 2014,
"value": 6.09
},
{
"id": 103006,
"iso3": "COD",
"country": "Congo (Democratic Republic of the)",
"year": 2014,
"value": 6.01
},
{
"id": 103006,
"iso3": "CRI",
"country": "Costa Rica",
"year": 2014,
"value": 8.368
},
{
"id": 103006,
"iso3": "CIV",
"country": "Côte d'Ivoire",
"year": 2014,
"value": 4.26
},
{
"id": 103006,
"iso3": "HRV",
"country": "Croatia",
"year": 2014,
"value": 11.027
},
{
"id": 103006,
"iso3": "CUB",
"country": "Cuba",
"year": 2014,
"value": 11.514
},
{
"id": 103006,
"iso3": "CYP",
"country": "Cyprus",
"year": 2014,
"value": 11.619
},
{
"id": 103006,
"iso3": "CZE",
"country": "Czech Republic",
"year": 2014,
"value": 12.32
}
];
definitions = [
{
"note": 69111,
"def": "This is the first definition."
},
{
"note": 70011,
"def": "This is the second definition."
}
];
// add years for select indicator
var nestyr = d3.nest()
.key(function(d) { return d.year; })
.sortKeys(d3.ascending)
.map(fullData);
var yearstring = Object.keys(nestyr);
var width = 200, height = 25;
var minInd = d3.min(fullData, function(d) { return d.value;} )
var maxInd = d3.max(fullData, function(d) { return d.value;} )
var tableData = [],
countries = {};
fullData.forEach(function (d) {
var country = countries[d.country];
if (!country) {
tableData.push(country = countries[d.country] = {});
}
if ( d.note ){
country[d.year] = d.value + " <span class='note'>" + d.note + "</span>";
countries[d.country]['note'] = d.note;
} else{
country[d.year] = d.value;
}
countries[d.country].Country = d.country;
});
yearstring.unshift("Country");
// render the table(s)
tabulate(tableData, yearstring);
function tabulate(newData, columns) {
var table = d3.select('#content').append('table')
var thead = table.append('thead')
var tbody = table.append('tbody');
var type = d3.nest()
.key(function(d) { return d.country; })
.sortKeys(d3.ascending)
.entries(fullData);
// append the header row
thead.append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.text(function (column) { return column; });
// create a row for each object in the data
var rows = tbody.selectAll('tr')
.data(newData)
.enter()
.append('tr');
// add stripes to the table
rows.attr("class", function(d, i){ if (i++ % 2 === 0){return 'row-even'}else {return 'row-odd'}});
// create a cell in each row for each column
var cells = rows.selectAll('td')
.data(function (row) {
return columns.map(function (column) {
return {column: column, value: row[column]};
});
})
.enter()
.append('td')
.attr("class", function (d,i) { return columns[i]; })
.html(function (d) { return d.value; });
return table;
};
</script>
</body>
</html>
2 个答案:
答案 0 :(得分：1)
如果我们切换到一个对象而不是一个数组用于音符，它会使事情变得更短更容易，更有效率。这样您就可以轻松查询相关密钥。
definitions = {
"69111": "This is the first definition.",
"70011": "This is the second definition."
};
到
var notes=""; // this holds our string, containing all the needed footnotes, but not more
var added=[]; // a list of the footnotes we've already included
当您检查笔记（并找到一个笔记）时，请将其用作对象的关键字。 首先，让我们在循环外部设置一个包含脚注的字符串，然后我们可以在循环中填充。
然后，为了防止生成相同音符的多个实例（国家/地区共享相同的音符键），我们应该列出我们所拥有的音符，也在循环之外，我们每次都会更新添加注释。
然后我们可以将所需的文本添加到包含我们注释的字符串（如果它实际存在），并且当循环结束时，将其附加到内容。
if ( d.note ){
country[d.year] = d.value + " <span class='note'>" + d.note + "</span>";
countries[d.country]['note'] = d.note;
if(added.indexOf(d.note)==-1){ // only when we HAVEN'T added it yet...
if(undefined!=definitions[d.note]){ // ...and there is actually a note available...
notes+=definitions[d.note]+"<br />"; // add it to the string
added.push(d.note); // add the key to the list, so we won't add it again later
}
}
...和内循环：
Foo()答案 1 :(得分：1)
如果您无法更改Javascript的定义，正如Ben Philipp建议的那样，我做了以下更改：
- 用于存储使用的ID
var usedDefinitions = {};的普通对象
- 阅读每个笔记后，在对象
usedDefinitions[d.note] = true;中创建其密钥
- 制表后，运行一个简单的循环来检查你应该绘制哪些定义，如下所示：
-
var usedDefinitionsArray = [];
for(var definition in definitions){
if(usedDefinitions[definitions[definition].note]){
usedDefinitionsArray.push(definitions[definition].note+': '+definitions[definition].def);
}
}
$('#content').append(usedDefinitionsArray.join('<br>'));
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？