javascript - 找到数组中键的所有现有值，从另一个数组中打印相应的数据-6ren

javascript - 找到数组中键的所有现有值，从另一个数组中打印相应的数据

转载作者：行者123 更新时间：2023-11-30 16:26:18

我有一个 javascript 对象数组，其中一些对象有一个名为“note”的键。其他人没有这个属性。

我从 javascript 数组创建了一个 html 表格，其中(如果可用)注释编号附加到与对象的年份和国家相对应的表格单元格中的主要值。

我想根据每个注释的值在表格下方打印相应的定义。这些定义将来自一个单独的 js 数组——我已经包含了一个摘录。总共有大约 70 个定义，我只想打印表中存在“note”值的定义。这是它的屏幕截图:

我有点陷入思考如何做到这一点。有什么想法吗？我很感激!

Here is a jsfiddle.

完整代码如下:

<!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>

最佳答案

如果我们为笔记改用对象而不是数组，事情会变得更短、更容易、更高效。这样您就可以轻松查询有问题的 key 。

definitions = [
    {
        "note": 69111,
        "def": "This is the first definition."
    },
    {
        "note": 70011,
        "def": "This is the second definition."     
    }
];

到

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

这有效: http://jsfiddle.net/svArtist/txc16240/

关于javascript - 找到数组中键的所有现有值，从另一个数组中打印相应的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34096058/

文章推荐：使用可变宏进行 C 日志记录

文章推荐： c# - 如何动态创建解决方案文件 .sln , .csproj , assemblyinfo.cs

文章推荐： c - 如何将字符串的空格分隔子字符串作为c中函数的参数传递

文章推荐： c - mmap 对于新创建的文件失败

PHP : echo"", 打印()，打印()
有没有更好的方法用 PHP 将数据输出到 html 页面？如果我想在 php 中用一些 var 制作一个 div，我会写类似的东西 print (''.$var.''); 或 echo "''.$v
javax 打印 vs java awt 打印 api
我可以使用 java awt print 来打印文档/文件而不是使用 javax print 吗？我发现在 java awt print 中有一个选项可以使用 AttributedString 将内容
R 命令行最佳实践 : exit, 打印 stdout、打印 stderr、避免警告
目前我通过以下方式运行 R 脚本: R --slave argument1 argument2 ... 我想知道 R 中关于如何退出脚本并发出警告的最佳实践，q() 会这样做吗？ if(!file.
c++ - 用 gcc 打印 c，用 g++ 打印 c++
谁能告诉我如何编写一个程序，用 gcc 编译时打印 c ，用 g++ 编译时打印 c++? 最佳答案 #ifdef __cplusplus printf("c++\n"); #else
android - 如何通过反射使用 KitKat 4.4 打印 API 打印 WebView？
我需要支持在 KitKat 设备上打印，但我的目标 SDK 是 13(无法更改)。特别是我需要打印一个 webview。这是用于打印 webview 的 API: http://developer
Python输入函数，打印
我正在尝试创建一个简单的函数，其中 python 将根据您的年份输入计算年龄。我已经尝试了几种方法，但我没有运气 atm。附:对不起，我是新手。 ame = input(" Enter your n
JavaFX 打印
JavaFX 2.0 是否支持打印？我有一个文本区域，我从中获取文本然后我想打印它，但似乎没有这个功能。当然，这里我说的是打印到打印机。 :) 最佳答案尚不支持。作为一种解决方法，您可以使用 Ja
Smalltalk - 打印 :
我试图找出printOn的重点。我查看了一些实现它的类，看起来它只是帮助打印不同数据类型的单位。这是准确的吗？如果是这样，有人能指出我如何为我自己的类(class)实现这一点的正确方向吗？我将在可能
打印 Canvas
我无法让 IE 打印我的 Canvas (使用 excanvas 生成)...我使用的是最新版本的 excanvas。 http://dl.dropbox.com/u/997831/canvas.ht
信号处理程序中的 C++ 打印？
我搜索了很多但没有人回答我的问题，我读到在这样的信号处理程序中使用 cout 是不安全的: void ctrlZHandler(int sig_num) { //SIGTSTP-18
python - MongoDB - 打印
我有兴趣打印一系列查询。我有以下代码。 start = datetime.datetime(2012, 2, 2, 6, 35, 6, 764) end = datetime.datetime(201
Java 打印 "?"而不是事物
public class javaClass { public static void main(String [] arg) { String row1 = "A____A"
python - 打印()到上一行？
我需要写入前一行的命令，例如不带\n 的 print()。下面是一些示例代码: a=0 print("Random string value") if a==0: print_to_prev
SwiftUI 打印 View
我有一个使用 UIKit 和 Objective C 的旧 iOS 应用程序，我目前正在将其移植到 SwiftUI 和 Swift。一切都很顺利，我喜欢 Swift 和 SwiftUI。该应用程序已经
Python 打印 while 循环的每次迭代
我创建了一个求和函数，它接受一个开始编号和一个结束编号，并返回这两点之间的总和答案 def print_sum_equations(start_number,end_number):
raku - 打印、放置和说的区别？
在 Perl 6 中，print 和有什么区别？ , put和 say ? 我怎么看 print 5不同，但 put 5和 say 5看起来一样。最佳答案 put $a就像 print $a.Str
jquery - 打印 getOrgChart
我正在使用 here 中的 getOrgChart 库，我正在尝试打印整个图表，而不仅仅是可见部分。不幸的是，当使用标准库打印功能时，它只会打印出第一部分，而我不知道如何打印整个图表(该图表相当宽，大
macos - cocoa 打印
我制作了一个非常适合 A4 页面的 View 。现在我想打印它。请注意，我没有使用drawRect或类似的东西，只是一个带有 subview 和文本标签的普通 View 。我的问题是，我对该 View
cocoa - 打印 NSImage
由于 Cocoa-Java 已弃用，我正在将 Cocoa-Java 代码迁移到 Cocoa + JNI。该代码打印存储在文件中的图像。新的 Cocoa 代码基本上是: NSImage *image =
delphi - 打印 TDBGrid
这个问题已经有答案了: Printing a TDBGrid (4 个回答) 已关闭 6 年前。如何在不安装或下载组件的情况下打印 DBGrid？或者如何将 DBGrid 的数据放入 RichE

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 找到数组中键的所有现有值，从另一个数组中打印相应的数据