从文本中查找并挑出模式 jquery
Finding and singling out pattern from text jquery
我正在将一个 CSV 文件解析成 JSON 并想挑出一些东西，主要是因为我想用它来绘制图表。输出看起来像这样
解析器输出：
{ "data": [ { "Output in top 10 percentiles (%)": "CNRS", "Overall": "22,6", "1996": "18,4", "1997": "18,6", "1998": "18,5", "1999": "17,3", "2000": "17,6", "2001": "18,6", "2002": "18,3", "2003": "17,5", "2004": "18,9", "2005": "20,2", "2006": "21,1", "2007": "22,1", "2008": "21,3", "2009": "22,9", "2010": "23,4", "2011": "25,3", "2012": "24,5", "2013": "29,3", "2014": "31,7" }, { "Output in top 10 percentiles (%)": "DACH - Austria, Germany and Switzerland", "Overall": "16,9", "1996": "13,3", "1997": "13,4", "1998": "13,6", "1999": "14,1", "2000": 14, "2001": "14,8", "2002": "15,1", "2003": "14,9", "2004": "15,5", "2005": "15,5", "2006": "15,8", "2007": "16,2", "2008": "16,1", "2009": "16,4", "2010": "17,6", "2011": "18,6", "2012": "18,4", "2013": "21,7", "2014": "25,1" }, { "Output in top 10 percentiles (%)": "Europe", "Overall": "13,5", "1996": "11,2", "1997": "11,2", "1998": "11,3", "1999": "11,5", "2000": "11,5", "2001": "12,2", "2002": "12,3", "2003": "12,2", "2004": "12,5", "2005": "12,6", "2006": "12,8", "2007": 13, "2008": "12,6", "2009": "12,8", "2010": "13,4", "2011": "14,1", "2012": "13,7", "2013": "16,5", "2014": "21,4" }, { "Output in top 10 percentiles (%)": "J. Stefan Institute", "Overall": "13,3", "1996": "6,5", "1997": 8, "1998": "8,9", "1999": "9,7", "2000": 8, "2001": "10,6", "2002": 7, "2003": "8,2", "2004": 12, "2005": "9,5", "2006": "10,6", "2007": "13,4", "2008": "11,9", "2009": "12,8", "2010": "14,9", "2011": "15,5", "2012": "15,2", "2013": "19,7", "2014": "25,6" }, { "Output in top 10 percentiles (%)": "Max Planck Society", "Overall": "30,3", "1996": "25,9", "1997": 24, "1998": "24,3", "1999": 25, "2000": "25,6", "2001": 27, "2002": "26,2", "2003": "27,6", "2004": "27,8", "2005": "27,8", "2006": "28,1", "2007": "29,4", "2008": "29,2", "2009": "30,9", "2010": "32,4", "2011": "33,2", "2012": "34,8", "2013": "39,8", "2014": "38,9" }, { "Output in top 10 percentiles (%)": "National Institute of Biology Ljubljana", "Overall": "17,7", "1996": 4, "1997": "13,3", "1998": 20, "1999": "13,3", "2000": "9,1", "2001": 15, "2002": "15,6", "2003": "20,8", "2004": "18,2", "2005": "14,7", "2006": "14,3", "2007": 18, "2008": "19,7", "2009": 20, "2010": "21,1", "2011": "16,7", "2012": "18,2", "2013": 19, "2014": "24,1" }, { "Output in top 10 percentiles (%)": "National Institute of Chemistry Ljubljana", "Overall": "21,5", "1996": "8,8", "1997": "4,1", "1998": "9,9", "1999": 15, "2000": "15,7", "2001": "21,4", "2002": "15,3", "2003": "18,4", "2004": "16,2", "2005": "20,4", "2006": "19,4", "2007": "30,8", "2008": "18,1", "2009": "19,4", "2010": "31,8", "2011": "23,1", "2012": "24,9", "2013": "29,3", "2014": 36 }, { "Output in top 10 percentiles (%)": "Scientific Research Centre of the Slovenian Academy of Sciences and Arts", "Overall": "5,9", "1996": 0, "1997": 0, "1998": 0, "1999": 0, "2000": 0, "2001": "NA", "2002": 0, "2003": 0, "2004": "14,3", "2005": "4,5", "2006": 0, "2007": 0, "2008": 0, "2009": "7,8", "2010": "2,4", "2011": "6,8", "2012": "4,8", "2013": 0, "2014": 30 }, { "Output in top 10 percentiles (%)": "Slovenia", "Overall": "10,7", "1996": "5,8", "1997": "5,7", "1998": "5,7", "1999": "6,8", "2000": "5,5", "2001": "6,5", "2002": "6,8", "2003": "7,6", "2004": "7,8", "2005": "8,5", "2006": "9,3", "2007": "10,7", "2008": "9,6", "2009": "9,7", "2010": "10,8", "2011": "11,8", "2012": "12,3", "2013": "15,4", "2014": "20,4" }, { "Output in top 10 percentiles (%)": "United States", "Overall": "18,3", "1996": "17,3", "1997": "17,5", "1998": "17,7", "1999": "17,7", "2000": "17,8", "2001": "18,9", "2002": "18,5", "2003": "17,7", "2004": "17,7", "2005": "17,3", "2006": "17,3", "2007": "17,6", "2008": "17,3", "2009": "17,4", "2010": "17,7", "2011": "18,4", "2012": "17,8", "2013": "20,2", "2014": 24 }, { "Output in top 10 percentiles (%)": "Universitat Stuttgart", "Overall": "12,9", "1996": "12,7", "1997": "10,5", "1998": "14,2", "1999": "13,8", "2000": "10,6", "2001": "11,5", "2002": "12,6", "2003": "10,3", "2004": "11,8", "2005": "9,7", "2006": "11,9", "2007": "11,2", "2008": "11,8", "2009": "11,9", "2010": "11,4", "2011": "13,7", "2012": "11,8", "2013": "16,4", "2014": "23,6" }, { "Output in top 10 percentiles (%)": "University of Ljubljana", "Overall": "10,9", "1996": "6,2", "1997": "6,1", "1998": "6,1", "1999": "7,1", "2000": 5, "2001": 6, "2002": "6,8", "2003": "8,9", "2004": "7,8", "2005": "8,8", "2006": "10,1", "2007": "11,3", "2008": "10,6", "2009": "10,2", "2010": "10,9", "2011": "12,1", "2012": "13,2", "2013": "14,6", "2014": "20,2" }, { "Output in top 10 percentiles (%)": "University of Maribor", "Overall": "9,5", "1996": "4,8", "1997": "3,6", "1998": "3,9", "1999": "1,9", "2000": "2,4", "2001": "2,4", "2002": "6,5", "2003": "4,5", "2004": "6,4", "2005": "8,8", "2006": "8,1", "2007": "9,4", "2008": 10, "2009": "8,5", "2010": "7,7", "2011": "9,9", "2012": 13, "2013": "15,9", "2014": "19,6" }, { "Output in top 10 percentiles (%)": "University of Nova Gorica", "Overall": "18,2", "1996": "NA", "1997": "NA", "1998": "NA", "1999": "8,3", "2000": 0, "2001": "4,2", "2002": 4, "2003": 10, "2004": "9,3", "2005": "12,3", "2006": 22, "2007": "25,2", "2008": "17,5", "2009": "12,2", "2010": "15,3", "2011": "15,9", "2012": "18,3", "2013": "25,6", "2014": "27,5" } ], "errors": [], "meta": { "delimiter": ";", "linebreak": "\r\n", "aborted": false, "truncated": false, "fields": [ "Output in top 10 percentiles (%)", "Overall", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014" ] } }
有没有办法搜索某一年之后的数字，比如 1996：18,4（我只想在变量上得到 18,4）？这些数字都保留在一位小数上，并且永远不会超过 100（它们是 %）。
我想我会做一个 for 循环来找到 1996: 然后在它之后打印出一定长度的字符。我现在很确定这不是正确的方法:)
所以我想做的是在单独的数组中获取每一年的数据，这样我就可以轻松访问它并将其用作我的图表的 x。
目前站点：
function handleFileSelect(evt) {
if ( !(evt.target && evt.target.files && evt.target.files[0]) ) {
return;
}
Papa.parse(evt.target.files[0], {
header: true,
dynamicTyping: true,
complete: function (results) {
debugDataset(results);
renderDataset(results);
}
});
}
function debugDataset(dataset) {
var formatted = JSON.stringify(dataset, null, 2);
$("<div class='parse'></div>").text(formatted).appendTo(".graphcontainer");
}
function renderDataset(dataset) {
// render code here...
}
$(function () {
$("#csv-file").change(handleFileSelect);
});
.graphcontainer {
width:500px;
height:500px;
border:1px solid black;
padding:5px;
margin:auto;
}
.buttoncontainer {
border:1px solid black;
padding:5px;
width:500px;
margin:auto;
}
.parse {
width:500px;
height:480px;
overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>csv testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/PapaParse/papaparse.js"></script>
<script src="index.js"></script>
<link type="text/css" rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="graphcontainer">Parser Output:</div>
<div class="buttoncontainer">
<input type="file" id="csv-file" name="files"/>
</div>
</body>
</html>
我正在处理的 CSV 文件：(http://topdeckandwreck.com/excel%20graphs/)
感谢帮助
编辑了完整的输出数据
您可以使用 JavaScript 的映射和过滤方法将数据列与已解析的 JSON 结构隔离。
下面是.map获取二维数组第三列的例子：
// 2D array
var arr2d = [[1, 2, 3], [4, 5, 6],[7, 8, 9]];
// get the third column
var col3 = arr2d.map(
function(value, index) {
return value[2]; // 2 is index of third column
}
);
// col3 is now [3, 6, 9]
在您的情况下，这应该是获取数组中返回的所有 1996 值的方法：
// provide your JSON in variable parserOutput
// get the column of year 1996
var col1996 = parserOutput.data.map(
function(value, index) {
return value["1996"]; // dot notation would be possible here, if key wasn't a number
}
);
// col1996 is now ["18,4", "13,3", "11,2", "6,5"]
更新：
带有示例数据的代码片段：
// provide your JSON in variable parserOutput
var parserOutput = {
"data": [
{ "Output in top 10 percentiles (%)": "CNRS", "Overall": "22,6", "1996": "18,4", "1997": "18,6", "1998": "18,5", "1999": "17,3", "2000": "17,6", "2001": "18,6", "2002": "18,3", "2003": "17,5", "2004": "18,9", "2005": "20,2", "2006": "21,1", "2007": "22,1", "2008": "21,3", "2009": "22,9", "2010": "23,4", "2011": "25,3", "2012": "24,5", "2013": "29,3", "2014": "31,7" },
{ "Output in top 10 percentiles (%)": "DACH - Austria, Germany and Switzerland", "Overall": "16,9", "1996": "13,3", "1997": "13,4", "1998": "13,6", "1999": "14,1", "2000": 14, "2001": "14,8", "2002": "15,1", "2003": "14,9", "2004": "15,5", "2005": "15,5", "2006": "15,8", "2007": "16,2", "2008": "16,1", "2009": "16,4", "2010": "17,6", "2011": "18,6", "2012": "18,4", "2013": "21,7", "2014": "25,1" },
{ "Output in top 10 percentiles (%)": "Europe", "Overall": "13,5", "1996": "11,2", "1997": "11,2", "1998": "11,3", "1999": "11,5", "2000": "11,5", "2001": "12,2", "2002": "12,3", "2003": "12,2", "2004": "12,5", "2005": "12,6", "2006": "12,8", "2007": 13, "2008": "12,6", "2009": "12,8", "2010": "13,4", "2011": "14,1", "2012": "13,7", "2013": "16,5", "2014": "21,4" },
{ "Output in top 10 percentiles (%)": "J. Stefan Institute", "Overall": "13,3", "1996": "6,5", "1997": 8, "1998": "8,9", "1999": "9,7", "2000": 8, "2001": "10,6", "2002": 7, "2003": "8,2", "2004": 12, "2005": "9,5", "2006": "10,6", "2007": "13,4", "2008": "11,9", "2009": "12,8", "2010": "14,9", "2011": "15,5", "2012": "15,2", "2013": "19,7", "2014": "25,6" },
{ "Output in top 10 percentiles (%)": "Max Planck Society", "Overall": "30,3", "1996": "25,9", "1997": 24, "1998": "24,3", "1999": 25, "2000": "25,6", "2001": 27, "2002": "26,2", "2003": "27,6", "2004": "27,8", "2005": "27,8", "2006": "28,1", "2007": "29,4", "2008": "29,2", "2009": "30,9", "2010": "32,4", "2011": "33,2", "2012": "34,8", "2013": "39,8", "2014": "38,9" },
{ "Output in top 10 percentiles (%)": "National Institute of Biology Ljubljana", "Overall": "17,7", "1996": 4, "1997": "13,3", "1998": 20, "1999": "13,3", "2000": "9,1", "2001": 15, "2002": "15,6", "2003": "20,8", "2004": "18,2", "2005": "14,7", "2006": "14,3", "2007": 18, "2008": "19,7", "2009": 20, "2010": "21,1", "2011": "16,7", "2012": "18,2", "2013": 19, "2014": "24,1" },
{ "Output in top 10 percentiles (%)": "National Institute of Chemistry Ljubljana", "Overall": "21,5", "1996": "8,8", "1997": "4,1", "1998": "9,9", "1999": 15, "2000": "15,7", "2001": "21,4", "2002": "15,3", "2003": "18,4", "2004": "16,2", "2005": "20,4", "2006": "19,4", "2007": "30,8", "2008": "18,1", "2009": "19,4", "2010": "31,8", "2011": "23,1", "2012": "24,9", "2013": "29,3", "2014": 36 },
{ "Output in top 10 percentiles (%)": "Scientific Research Centre of the Slovenian Academy of Sciences and Arts", "Overall": "5,9", "1996": 0, "1997": 0, "1998": 0, "1999": 0, "2000": 0, "2001": "NA", "2002": 0, "2003": 0, "2004": "14,3", "2005": "4,5", "2006": 0, "2007": 0, "2008": 0, "2009": "7,8", "2010": "2,4", "2011": "6,8", "2012": "4,8", "2013": 0, "2014": 30 },
{ "Output in top 10 percentiles (%)": "Slovenia", "Overall": "10,7", "1996": "5,8", "1997": "5,7", "1998": "5,7", "1999": "6,8", "2000": "5,5", "2001": "6,5", "2002": "6,8", "2003": "7,6", "2004": "7,8", "2005": "8,5", "2006": "9,3", "2007": "10,7", "2008": "9,6", "2009": "9,7", "2010": "10,8", "2011": "11,8", "2012": "12,3", "2013": "15,4", "2014": "20,4" },
{ "Output in top 10 percentiles (%)": "United States", "Overall": "18,3", "1996": "17,3", "1997": "17,5", "1998": "17,7", "1999": "17,7", "2000": "17,8", "2001": "18,9", "2002": "18,5", "2003": "17,7", "2004": "17,7", "2005": "17,3", "2006": "17,3", "2007": "17,6", "2008": "17,3", "2009": "17,4", "2010": "17,7", "2011": "18,4", "2012": "17,8", "2013": "20,2", "2014": 24 },
{ "Output in top 10 percentiles (%)": "Universitat Stuttgart", "Overall": "12,9", "1996": "12,7", "1997": "10,5", "1998": "14,2", "1999": "13,8", "2000": "10,6", "2001": "11,5", "2002": "12,6", "2003": "10,3", "2004": "11,8", "2005": "9,7", "2006": "11,9", "2007": "11,2", "2008": "11,8", "2009": "11,9", "2010": "11,4", "2011": "13,7", "2012": "11,8", "2013": "16,4", "2014": "23,6" },
{ "Output in top 10 percentiles (%)": "University of Ljubljana", "Overall": "10,9", "1996": "6,2", "1997": "6,1", "1998": "6,1", "1999": "7,1", "2000": 5, "2001": 6, "2002": "6,8", "2003": "8,9", "2004": "7,8", "2005": "8,8", "2006": "10,1", "2007": "11,3", "2008": "10,6", "2009": "10,2", "2010": "10,9", "2011": "12,1", "2012": "13,2", "2013": "14,6", "2014": "20,2" },
{ "Output in top 10 percentiles (%)": "University of Maribor", "Overall": "9,5", "1996": "4,8", "1997": "3,6", "1998": "3,9", "1999": "1,9", "2000": "2,4", "2001": "2,4", "2002": "6,5", "2003": "4,5", "2004": "6,4", "2005": "8,8", "2006": "8,1", "2007": "9,4", "2008": 10, "2009": "8,5", "2010": "7,7", "2011": "9,9", "2012": 13, "2013": "15,9", "2014": "19,6" },
{ "Output in top 10 percentiles (%)": "University of Nova Gorica", "Overall": "18,2", "1996": "NA", "1997": "NA", "1998": "NA", "1999": "8,3", "2000": 0, "2001": "4,2", "2002": 4, "2003": 10, "2004": "9,3", "2005": "12,3", "2006": 22, "2007": "25,2", "2008": "17,5", "2009": "12,2", "2010": "15,3", "2011": "15,9", "2012": "18,3", "2013": "25,6", "2014": "27,5" }
],
"errors": [], "meta": { "delimiter": ";", "linebreak": "\r\n", "aborted": false, "truncated": false, "fields": [ "Output in top 10 percentiles (%)", "Overall", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014" ] }
};
// get the column of year 1996
var col1996 = parserOutput.data.map(
function(value, index) {
return value["1996"]; // dot notation would be possible here, if key wasn't a number
}
);
// col1996 is now ["18,4", "13,3", "11,2", "6,5", ...]
// Some methods to output the result:
//alert(col1996);
//console.log(col1996);
document.getElementById("result").innerHTML = col1996.join('<br>');
<p>Result in var col1996:</p>
<div id="result"></div>
尝试
// return object of year values as property of year
var yearData = $.map(data,function(value) {
return $.map(value, function(years) {
return Object.keys(years).filter(Number)
.map(function(data) {
var year = {};
year[data] = years[data];
return year
})
})
});
$("#graphcontainer").text(JSON.stringify(yearData, null, 2));
// filter year data
var filtered = function(year) {
return [].slice.call(yearData).filter(function(years) {
return Number(Object.keys(years)[0]) === year
})
};
var year = filtered(1996);
var data = data = { "data": [ { "Output in top 10 percentiles (%)": "CNRS", "Overall": "22,6", "1996": "18,4", "1997": "18,6", "1998": "18,5", "1999": "17,3", "2000": "17,6", "2001": "18,6", "2002": "18,3", "2003": "17,5", "2004": "18,9", "2005": "20,2", "2006": "21,1", "2007": "22,1", "2008": "21,3", "2009": "22,9", "2010": "23,4", "2011": "25,3", "2012": "24,5", "2013": "29,3", "2014": "31,7" }, { "Output in top 10 percentiles (%)": "DACH - Austria, Germany and Switzerland", "Overall": "16,9", "1996": "13,3", "1997": "13,4", "1998": "13,6", "1999": "14,1", "2000": 14, "2001": "14,8", "2002": "15,1", "2003": "14,9", "2004": "15,5", "2005": "15,5", "2006": "15,8", "2007": "16,2", "2008": "16,1", "2009": "16,4", "2010": "17,6", "2011": "18,6", "2012": "18,4", "2013": "21,7", "2014": "25,1" }, { "Output in top 10 percentiles (%)": "Europe", "Overall": "13,5", "1996": "11,2", "1997": "11,2", "1998": "11,3", "1999": "11,5", "2000": "11,5", "2001": "12,2", "2002": "12,3", "2003": "12,2", "2004": "12,5", "2005": "12,6", "2006": "12,8", "2007": 13, "2008": "12,6", "2009": "12,8", "2010": "13,4", "2011": "14,1", "2012": "13,7", "2013": "16,5", "2014": "21,4" }, { "Output in top 10 percentiles (%)": "J. Stefan Institute", "Overall": "13,3", "1996": "6,5", "1997": 8, "1998": "8,9", "1999": "9,7", "2000": 8, "2001": "10,6", "2002": 7, "2003": "8,2", "2004": 12, "2005": "9,5", "2006": "10,6", "2007": "13,4", "2008": "11,9", "2009": "12,8", "2010": "14,9", "2011": "15,5", "2012": "15,2", "2013": "19,7", "2014": "25,6" } ] };
var yearData = $.map(data,function(value) {
return $.map(value, function(years) {
return Object.keys(years).filter(Number)
.map(function(data) {
var year = {};
year[data] = years[data];
return year
})
})
});
$("#graphcontainer").text(JSON.stringify(yearData, null, 2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="graphcontainer"></pre>
我不知道。还不错。有点复杂，但是通过javascript可以通过key解析出数据。当然，在从存储的任何数据库中抓取数据后格式化数据服务器端会更易于维护，但这个解决方案可以工作。
var raw_data = { "data": [ { "Output in top 10 percentiles (%)": "CNRS", "Overall": "22,6", "1996": "18,4", "1997": "18,6", "1998": "18,5", "1999": "17,3", "2000": "17,6", "2001": "18,6", "2002": "18,3", "2003": "17,5", "2004": "18,9", "2005": "20,2", "2006": "21,1", "2007": "22,1", "2008": "21,3", "2009": "22,9", "2010": "23,4", "2011": "25,3", "2012": "24,5", "2013": "29,3", "2014": "31,7" }, { "Output in top 10 percentiles (%)": "DACH - Austria, Germany and Switzerland", "Overall": "16,9", "1996": "13,3", "1997": "13,4", "1998": "13,6", "1999": "14,1", "2000": 14, "2001": "14,8", "2002": "15,1", "2003": "14,9", "2004": "15,5", "2005": "15,5", "2006": "15,8", "2007": "16,2", "2008": "16,1", "2009": "16,4", "2010": "17,6", "2011": "18,6", "2012": "18,4", "2013": "21,7", "2014": "25,1" }, { "Output in top 10 percentiles (%)": "Europe", "Overall": "13,5", "1996": "11,2", "1997": "11,2", "1998": "11,3", "1999": "11,5", "2000": "11,5", "2001": "12,2", "2002": "12,3", "2003": "12,2", "2004": "12,5", "2005": "12,6", "2006": "12,8", "2007": 13, "2008": "12,6", "2009": "12,8", "2010": "13,4", "2011": "14,1", "2012": "13,7", "2013": "16,5", "2014": "21,4" }, { "Output in top 10 percentiles (%)": "J. Stefan Institute", "Overall": "13,3", "1996": "6,5", "1997": 8, "1998": "8,9", "1999": "9,7", "2000": 8, "2001": "10,6", "2002": 7, "2003": "8,2", "2004": 12, "2005": "9,5", "2006": "10,6", "2007": "13,4", "2008": "11,9", "2009": "12,8", "2010": "14,9", "2011": "15,5", "2012": "15,2", "2013": "19,7", "2014": "25,6" } ] };
// create the object to store the values. If you know associative
// arrays, this is the same concept. We're creating keys that store
// each of the values. This way we can keep referencing the same
// property (e.g. 1998) and append each value wherever it should go.
var formatted_data = {};
// loop over the raw data
for(var i in raw_data.data) {
// here we are grabbing all the keys for this row. (e.g. 1996, 1997,
// and even "Output in top 10 percentiles (%)")
var keys = Object.keys(raw_data.data[i]);
// loop over all the keys
for(var k = 0, len = keys.length; k < len; k++) {
// First check to see if our key (1996 or whatever) is already in
// the formatted_data variable. If it is, append to it. If it
// isn't, we need to create it.
if(typeof formatted_data[keys[k]] !== "undefined") {
// it exists! Tack on the value now.
formatted_data[keys[k]].push(raw_data.data[i][keys[k]]);
} else {
// it doesn't exist, create a new one and instantiate an array
// with one entry: the value.
formatted_data[keys[k]] = new Array(raw_data.data[i][keys[k]])
}
}
}
// output for debugging
console.log(formatted_data);
<strong>See javascript console for output</strong>
我正在将一个 CSV 文件解析成 JSON 并想挑出一些东西，主要是因为我想用它来绘制图表。输出看起来像这样
解析器输出：
{ "data": [ { "Output in top 10 percentiles (%)": "CNRS", "Overall": "22,6", "1996": "18,4", "1997": "18,6", "1998": "18,5", "1999": "17,3", "2000": "17,6", "2001": "18,6", "2002": "18,3", "2003": "17,5", "2004": "18,9", "2005": "20,2", "2006": "21,1", "2007": "22,1", "2008": "21,3", "2009": "22,9", "2010": "23,4", "2011": "25,3", "2012": "24,5", "2013": "29,3", "2014": "31,7" }, { "Output in top 10 percentiles (%)": "DACH - Austria, Germany and Switzerland", "Overall": "16,9", "1996": "13,3", "1997": "13,4", "1998": "13,6", "1999": "14,1", "2000": 14, "2001": "14,8", "2002": "15,1", "2003": "14,9", "2004": "15,5", "2005": "15,5", "2006": "15,8", "2007": "16,2", "2008": "16,1", "2009": "16,4", "2010": "17,6", "2011": "18,6", "2012": "18,4", "2013": "21,7", "2014": "25,1" }, { "Output in top 10 percentiles (%)": "Europe", "Overall": "13,5", "1996": "11,2", "1997": "11,2", "1998": "11,3", "1999": "11,5", "2000": "11,5", "2001": "12,2", "2002": "12,3", "2003": "12,2", "2004": "12,5", "2005": "12,6", "2006": "12,8", "2007": 13, "2008": "12,6", "2009": "12,8", "2010": "13,4", "2011": "14,1", "2012": "13,7", "2013": "16,5", "2014": "21,4" }, { "Output in top 10 percentiles (%)": "J. Stefan Institute", "Overall": "13,3", "1996": "6,5", "1997": 8, "1998": "8,9", "1999": "9,7", "2000": 8, "2001": "10,6", "2002": 7, "2003": "8,2", "2004": 12, "2005": "9,5", "2006": "10,6", "2007": "13,4", "2008": "11,9", "2009": "12,8", "2010": "14,9", "2011": "15,5", "2012": "15,2", "2013": "19,7", "2014": "25,6" }, { "Output in top 10 percentiles (%)": "Max Planck Society", "Overall": "30,3", "1996": "25,9", "1997": 24, "1998": "24,3", "1999": 25, "2000": "25,6", "2001": 27, "2002": "26,2", "2003": "27,6", "2004": "27,8", "2005": "27,8", "2006": "28,1", "2007": "29,4", "2008": "29,2", "2009": "30,9", "2010": "32,4", "2011": "33,2", "2012": "34,8", "2013": "39,8", "2014": "38,9" }, { "Output in top 10 percentiles (%)": "National Institute of Biology Ljubljana", "Overall": "17,7", "1996": 4, "1997": "13,3", "1998": 20, "1999": "13,3", "2000": "9,1", "2001": 15, "2002": "15,6", "2003": "20,8", "2004": "18,2", "2005": "14,7", "2006": "14,3", "2007": 18, "2008": "19,7", "2009": 20, "2010": "21,1", "2011": "16,7", "2012": "18,2", "2013": 19, "2014": "24,1" }, { "Output in top 10 percentiles (%)": "National Institute of Chemistry Ljubljana", "Overall": "21,5", "1996": "8,8", "1997": "4,1", "1998": "9,9", "1999": 15, "2000": "15,7", "2001": "21,4", "2002": "15,3", "2003": "18,4", "2004": "16,2", "2005": "20,4", "2006": "19,4", "2007": "30,8", "2008": "18,1", "2009": "19,4", "2010": "31,8", "2011": "23,1", "2012": "24,9", "2013": "29,3", "2014": 36 }, { "Output in top 10 percentiles (%)": "Scientific Research Centre of the Slovenian Academy of Sciences and Arts", "Overall": "5,9", "1996": 0, "1997": 0, "1998": 0, "1999": 0, "2000": 0, "2001": "NA", "2002": 0, "2003": 0, "2004": "14,3", "2005": "4,5", "2006": 0, "2007": 0, "2008": 0, "2009": "7,8", "2010": "2,4", "2011": "6,8", "2012": "4,8", "2013": 0, "2014": 30 }, { "Output in top 10 percentiles (%)": "Slovenia", "Overall": "10,7", "1996": "5,8", "1997": "5,7", "1998": "5,7", "1999": "6,8", "2000": "5,5", "2001": "6,5", "2002": "6,8", "2003": "7,6", "2004": "7,8", "2005": "8,5", "2006": "9,3", "2007": "10,7", "2008": "9,6", "2009": "9,7", "2010": "10,8", "2011": "11,8", "2012": "12,3", "2013": "15,4", "2014": "20,4" }, { "Output in top 10 percentiles (%)": "United States", "Overall": "18,3", "1996": "17,3", "1997": "17,5", "1998": "17,7", "1999": "17,7", "2000": "17,8", "2001": "18,9", "2002": "18,5", "2003": "17,7", "2004": "17,7", "2005": "17,3", "2006": "17,3", "2007": "17,6", "2008": "17,3", "2009": "17,4", "2010": "17,7", "2011": "18,4", "2012": "17,8", "2013": "20,2", "2014": 24 }, { "Output in top 10 percentiles (%)": "Universitat Stuttgart", "Overall": "12,9", "1996": "12,7", "1997": "10,5", "1998": "14,2", "1999": "13,8", "2000": "10,6", "2001": "11,5", "2002": "12,6", "2003": "10,3", "2004": "11,8", "2005": "9,7", "2006": "11,9", "2007": "11,2", "2008": "11,8", "2009": "11,9", "2010": "11,4", "2011": "13,7", "2012": "11,8", "2013": "16,4", "2014": "23,6" }, { "Output in top 10 percentiles (%)": "University of Ljubljana", "Overall": "10,9", "1996": "6,2", "1997": "6,1", "1998": "6,1", "1999": "7,1", "2000": 5, "2001": 6, "2002": "6,8", "2003": "8,9", "2004": "7,8", "2005": "8,8", "2006": "10,1", "2007": "11,3", "2008": "10,6", "2009": "10,2", "2010": "10,9", "2011": "12,1", "2012": "13,2", "2013": "14,6", "2014": "20,2" }, { "Output in top 10 percentiles (%)": "University of Maribor", "Overall": "9,5", "1996": "4,8", "1997": "3,6", "1998": "3,9", "1999": "1,9", "2000": "2,4", "2001": "2,4", "2002": "6,5", "2003": "4,5", "2004": "6,4", "2005": "8,8", "2006": "8,1", "2007": "9,4", "2008": 10, "2009": "8,5", "2010": "7,7", "2011": "9,9", "2012": 13, "2013": "15,9", "2014": "19,6" }, { "Output in top 10 percentiles (%)": "University of Nova Gorica", "Overall": "18,2", "1996": "NA", "1997": "NA", "1998": "NA", "1999": "8,3", "2000": 0, "2001": "4,2", "2002": 4, "2003": 10, "2004": "9,3", "2005": "12,3", "2006": 22, "2007": "25,2", "2008": "17,5", "2009": "12,2", "2010": "15,3", "2011": "15,9", "2012": "18,3", "2013": "25,6", "2014": "27,5" } ], "errors": [], "meta": { "delimiter": ";", "linebreak": "\r\n", "aborted": false, "truncated": false, "fields": [ "Output in top 10 percentiles (%)", "Overall", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014" ] } }
有没有办法搜索某一年之后的数字，比如 1996：18,4（我只想在变量上得到 18,4）？这些数字都保留在一位小数上，并且永远不会超过 100（它们是 %）。 我想我会做一个 for 循环来找到 1996: 然后在它之后打印出一定长度的字符。我现在很确定这不是正确的方法:)
所以我想做的是在单独的数组中获取每一年的数据，这样我就可以轻松访问它并将其用作我的图表的 x。
目前站点：
function handleFileSelect(evt) {
if ( !(evt.target && evt.target.files && evt.target.files[0]) ) {
return;
}
Papa.parse(evt.target.files[0], {
header: true,
dynamicTyping: true,
complete: function (results) {
debugDataset(results);
renderDataset(results);
}
});
}
function debugDataset(dataset) {
var formatted = JSON.stringify(dataset, null, 2);
$("<div class='parse'></div>").text(formatted).appendTo(".graphcontainer");
}
function renderDataset(dataset) {
// render code here...
}
$(function () {
$("#csv-file").change(handleFileSelect);
});
.graphcontainer {
width:500px;
height:500px;
border:1px solid black;
padding:5px;
margin:auto;
}
.buttoncontainer {
border:1px solid black;
padding:5px;
width:500px;
margin:auto;
}
.parse {
width:500px;
height:480px;
overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>csv testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/PapaParse/papaparse.js"></script>
<script src="index.js"></script>
<link type="text/css" rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="graphcontainer">Parser Output:</div>
<div class="buttoncontainer">
<input type="file" id="csv-file" name="files"/>
</div>
</body>
</html>
我正在处理的 CSV 文件：(http://topdeckandwreck.com/excel%20graphs/)
感谢帮助
编辑了完整的输出数据
您可以使用 JavaScript 的映射和过滤方法将数据列与已解析的 JSON 结构隔离。
下面是.map获取二维数组第三列的例子：
// 2D array
var arr2d = [[1, 2, 3], [4, 5, 6],[7, 8, 9]];
// get the third column
var col3 = arr2d.map(
function(value, index) {
return value[2]; // 2 is index of third column
}
);
// col3 is now [3, 6, 9]
在您的情况下，这应该是获取数组中返回的所有 1996 值的方法：
// provide your JSON in variable parserOutput
// get the column of year 1996
var col1996 = parserOutput.data.map(
function(value, index) {
return value["1996"]; // dot notation would be possible here, if key wasn't a number
}
);
// col1996 is now ["18,4", "13,3", "11,2", "6,5"]
更新：
带有示例数据的代码片段：
// provide your JSON in variable parserOutput
var parserOutput = {
"data": [
{ "Output in top 10 percentiles (%)": "CNRS", "Overall": "22,6", "1996": "18,4", "1997": "18,6", "1998": "18,5", "1999": "17,3", "2000": "17,6", "2001": "18,6", "2002": "18,3", "2003": "17,5", "2004": "18,9", "2005": "20,2", "2006": "21,1", "2007": "22,1", "2008": "21,3", "2009": "22,9", "2010": "23,4", "2011": "25,3", "2012": "24,5", "2013": "29,3", "2014": "31,7" },
{ "Output in top 10 percentiles (%)": "DACH - Austria, Germany and Switzerland", "Overall": "16,9", "1996": "13,3", "1997": "13,4", "1998": "13,6", "1999": "14,1", "2000": 14, "2001": "14,8", "2002": "15,1", "2003": "14,9", "2004": "15,5", "2005": "15,5", "2006": "15,8", "2007": "16,2", "2008": "16,1", "2009": "16,4", "2010": "17,6", "2011": "18,6", "2012": "18,4", "2013": "21,7", "2014": "25,1" },
{ "Output in top 10 percentiles (%)": "Europe", "Overall": "13,5", "1996": "11,2", "1997": "11,2", "1998": "11,3", "1999": "11,5", "2000": "11,5", "2001": "12,2", "2002": "12,3", "2003": "12,2", "2004": "12,5", "2005": "12,6", "2006": "12,8", "2007": 13, "2008": "12,6", "2009": "12,8", "2010": "13,4", "2011": "14,1", "2012": "13,7", "2013": "16,5", "2014": "21,4" },
{ "Output in top 10 percentiles (%)": "J. Stefan Institute", "Overall": "13,3", "1996": "6,5", "1997": 8, "1998": "8,9", "1999": "9,7", "2000": 8, "2001": "10,6", "2002": 7, "2003": "8,2", "2004": 12, "2005": "9,5", "2006": "10,6", "2007": "13,4", "2008": "11,9", "2009": "12,8", "2010": "14,9", "2011": "15,5", "2012": "15,2", "2013": "19,7", "2014": "25,6" },
{ "Output in top 10 percentiles (%)": "Max Planck Society", "Overall": "30,3", "1996": "25,9", "1997": 24, "1998": "24,3", "1999": 25, "2000": "25,6", "2001": 27, "2002": "26,2", "2003": "27,6", "2004": "27,8", "2005": "27,8", "2006": "28,1", "2007": "29,4", "2008": "29,2", "2009": "30,9", "2010": "32,4", "2011": "33,2", "2012": "34,8", "2013": "39,8", "2014": "38,9" },
{ "Output in top 10 percentiles (%)": "National Institute of Biology Ljubljana", "Overall": "17,7", "1996": 4, "1997": "13,3", "1998": 20, "1999": "13,3", "2000": "9,1", "2001": 15, "2002": "15,6", "2003": "20,8", "2004": "18,2", "2005": "14,7", "2006": "14,3", "2007": 18, "2008": "19,7", "2009": 20, "2010": "21,1", "2011": "16,7", "2012": "18,2", "2013": 19, "2014": "24,1" },
{ "Output in top 10 percentiles (%)": "National Institute of Chemistry Ljubljana", "Overall": "21,5", "1996": "8,8", "1997": "4,1", "1998": "9,9", "1999": 15, "2000": "15,7", "2001": "21,4", "2002": "15,3", "2003": "18,4", "2004": "16,2", "2005": "20,4", "2006": "19,4", "2007": "30,8", "2008": "18,1", "2009": "19,4", "2010": "31,8", "2011": "23,1", "2012": "24,9", "2013": "29,3", "2014": 36 },
{ "Output in top 10 percentiles (%)": "Scientific Research Centre of the Slovenian Academy of Sciences and Arts", "Overall": "5,9", "1996": 0, "1997": 0, "1998": 0, "1999": 0, "2000": 0, "2001": "NA", "2002": 0, "2003": 0, "2004": "14,3", "2005": "4,5", "2006": 0, "2007": 0, "2008": 0, "2009": "7,8", "2010": "2,4", "2011": "6,8", "2012": "4,8", "2013": 0, "2014": 30 },
{ "Output in top 10 percentiles (%)": "Slovenia", "Overall": "10,7", "1996": "5,8", "1997": "5,7", "1998": "5,7", "1999": "6,8", "2000": "5,5", "2001": "6,5", "2002": "6,8", "2003": "7,6", "2004": "7,8", "2005": "8,5", "2006": "9,3", "2007": "10,7", "2008": "9,6", "2009": "9,7", "2010": "10,8", "2011": "11,8", "2012": "12,3", "2013": "15,4", "2014": "20,4" },
{ "Output in top 10 percentiles (%)": "United States", "Overall": "18,3", "1996": "17,3", "1997": "17,5", "1998": "17,7", "1999": "17,7", "2000": "17,8", "2001": "18,9", "2002": "18,5", "2003": "17,7", "2004": "17,7", "2005": "17,3", "2006": "17,3", "2007": "17,6", "2008": "17,3", "2009": "17,4", "2010": "17,7", "2011": "18,4", "2012": "17,8", "2013": "20,2", "2014": 24 },
{ "Output in top 10 percentiles (%)": "Universitat Stuttgart", "Overall": "12,9", "1996": "12,7", "1997": "10,5", "1998": "14,2", "1999": "13,8", "2000": "10,6", "2001": "11,5", "2002": "12,6", "2003": "10,3", "2004": "11,8", "2005": "9,7", "2006": "11,9", "2007": "11,2", "2008": "11,8", "2009": "11,9", "2010": "11,4", "2011": "13,7", "2012": "11,8", "2013": "16,4", "2014": "23,6" },
{ "Output in top 10 percentiles (%)": "University of Ljubljana", "Overall": "10,9", "1996": "6,2", "1997": "6,1", "1998": "6,1", "1999": "7,1", "2000": 5, "2001": 6, "2002": "6,8", "2003": "8,9", "2004": "7,8", "2005": "8,8", "2006": "10,1", "2007": "11,3", "2008": "10,6", "2009": "10,2", "2010": "10,9", "2011": "12,1", "2012": "13,2", "2013": "14,6", "2014": "20,2" },
{ "Output in top 10 percentiles (%)": "University of Maribor", "Overall": "9,5", "1996": "4,8", "1997": "3,6", "1998": "3,9", "1999": "1,9", "2000": "2,4", "2001": "2,4", "2002": "6,5", "2003": "4,5", "2004": "6,4", "2005": "8,8", "2006": "8,1", "2007": "9,4", "2008": 10, "2009": "8,5", "2010": "7,7", "2011": "9,9", "2012": 13, "2013": "15,9", "2014": "19,6" },
{ "Output in top 10 percentiles (%)": "University of Nova Gorica", "Overall": "18,2", "1996": "NA", "1997": "NA", "1998": "NA", "1999": "8,3", "2000": 0, "2001": "4,2", "2002": 4, "2003": 10, "2004": "9,3", "2005": "12,3", "2006": 22, "2007": "25,2", "2008": "17,5", "2009": "12,2", "2010": "15,3", "2011": "15,9", "2012": "18,3", "2013": "25,6", "2014": "27,5" }
],
"errors": [], "meta": { "delimiter": ";", "linebreak": "\r\n", "aborted": false, "truncated": false, "fields": [ "Output in top 10 percentiles (%)", "Overall", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014" ] }
};
// get the column of year 1996
var col1996 = parserOutput.data.map(
function(value, index) {
return value["1996"]; // dot notation would be possible here, if key wasn't a number
}
);
// col1996 is now ["18,4", "13,3", "11,2", "6,5", ...]
// Some methods to output the result:
//alert(col1996);
//console.log(col1996);
document.getElementById("result").innerHTML = col1996.join('<br>');
<p>Result in var col1996:</p>
<div id="result"></div>
尝试
// return object of year values as property of year
var yearData = $.map(data,function(value) {
return $.map(value, function(years) {
return Object.keys(years).filter(Number)
.map(function(data) {
var year = {};
year[data] = years[data];
return year
})
})
});
$("#graphcontainer").text(JSON.stringify(yearData, null, 2));
// filter year data
var filtered = function(year) {
return [].slice.call(yearData).filter(function(years) {
return Number(Object.keys(years)[0]) === year
})
};
var year = filtered(1996);
var data = data = { "data": [ { "Output in top 10 percentiles (%)": "CNRS", "Overall": "22,6", "1996": "18,4", "1997": "18,6", "1998": "18,5", "1999": "17,3", "2000": "17,6", "2001": "18,6", "2002": "18,3", "2003": "17,5", "2004": "18,9", "2005": "20,2", "2006": "21,1", "2007": "22,1", "2008": "21,3", "2009": "22,9", "2010": "23,4", "2011": "25,3", "2012": "24,5", "2013": "29,3", "2014": "31,7" }, { "Output in top 10 percentiles (%)": "DACH - Austria, Germany and Switzerland", "Overall": "16,9", "1996": "13,3", "1997": "13,4", "1998": "13,6", "1999": "14,1", "2000": 14, "2001": "14,8", "2002": "15,1", "2003": "14,9", "2004": "15,5", "2005": "15,5", "2006": "15,8", "2007": "16,2", "2008": "16,1", "2009": "16,4", "2010": "17,6", "2011": "18,6", "2012": "18,4", "2013": "21,7", "2014": "25,1" }, { "Output in top 10 percentiles (%)": "Europe", "Overall": "13,5", "1996": "11,2", "1997": "11,2", "1998": "11,3", "1999": "11,5", "2000": "11,5", "2001": "12,2", "2002": "12,3", "2003": "12,2", "2004": "12,5", "2005": "12,6", "2006": "12,8", "2007": 13, "2008": "12,6", "2009": "12,8", "2010": "13,4", "2011": "14,1", "2012": "13,7", "2013": "16,5", "2014": "21,4" }, { "Output in top 10 percentiles (%)": "J. Stefan Institute", "Overall": "13,3", "1996": "6,5", "1997": 8, "1998": "8,9", "1999": "9,7", "2000": 8, "2001": "10,6", "2002": 7, "2003": "8,2", "2004": 12, "2005": "9,5", "2006": "10,6", "2007": "13,4", "2008": "11,9", "2009": "12,8", "2010": "14,9", "2011": "15,5", "2012": "15,2", "2013": "19,7", "2014": "25,6" } ] };
var yearData = $.map(data,function(value) {
return $.map(value, function(years) {
return Object.keys(years).filter(Number)
.map(function(data) {
var year = {};
year[data] = years[data];
return year
})
})
});
$("#graphcontainer").text(JSON.stringify(yearData, null, 2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="graphcontainer"></pre>
我不知道。还不错。有点复杂，但是通过javascript可以通过key解析出数据。当然，在从存储的任何数据库中抓取数据后格式化数据服务器端会更易于维护，但这个解决方案可以工作。
var raw_data = { "data": [ { "Output in top 10 percentiles (%)": "CNRS", "Overall": "22,6", "1996": "18,4", "1997": "18,6", "1998": "18,5", "1999": "17,3", "2000": "17,6", "2001": "18,6", "2002": "18,3", "2003": "17,5", "2004": "18,9", "2005": "20,2", "2006": "21,1", "2007": "22,1", "2008": "21,3", "2009": "22,9", "2010": "23,4", "2011": "25,3", "2012": "24,5", "2013": "29,3", "2014": "31,7" }, { "Output in top 10 percentiles (%)": "DACH - Austria, Germany and Switzerland", "Overall": "16,9", "1996": "13,3", "1997": "13,4", "1998": "13,6", "1999": "14,1", "2000": 14, "2001": "14,8", "2002": "15,1", "2003": "14,9", "2004": "15,5", "2005": "15,5", "2006": "15,8", "2007": "16,2", "2008": "16,1", "2009": "16,4", "2010": "17,6", "2011": "18,6", "2012": "18,4", "2013": "21,7", "2014": "25,1" }, { "Output in top 10 percentiles (%)": "Europe", "Overall": "13,5", "1996": "11,2", "1997": "11,2", "1998": "11,3", "1999": "11,5", "2000": "11,5", "2001": "12,2", "2002": "12,3", "2003": "12,2", "2004": "12,5", "2005": "12,6", "2006": "12,8", "2007": 13, "2008": "12,6", "2009": "12,8", "2010": "13,4", "2011": "14,1", "2012": "13,7", "2013": "16,5", "2014": "21,4" }, { "Output in top 10 percentiles (%)": "J. Stefan Institute", "Overall": "13,3", "1996": "6,5", "1997": 8, "1998": "8,9", "1999": "9,7", "2000": 8, "2001": "10,6", "2002": 7, "2003": "8,2", "2004": 12, "2005": "9,5", "2006": "10,6", "2007": "13,4", "2008": "11,9", "2009": "12,8", "2010": "14,9", "2011": "15,5", "2012": "15,2", "2013": "19,7", "2014": "25,6" } ] };
// create the object to store the values. If you know associative
// arrays, this is the same concept. We're creating keys that store
// each of the values. This way we can keep referencing the same
// property (e.g. 1998) and append each value wherever it should go.
var formatted_data = {};
// loop over the raw data
for(var i in raw_data.data) {
// here we are grabbing all the keys for this row. (e.g. 1996, 1997,
// and even "Output in top 10 percentiles (%)")
var keys = Object.keys(raw_data.data[i]);
// loop over all the keys
for(var k = 0, len = keys.length; k < len; k++) {
// First check to see if our key (1996 or whatever) is already in
// the formatted_data variable. If it is, append to it. If it
// isn't, we need to create it.
if(typeof formatted_data[keys[k]] !== "undefined") {
// it exists! Tack on the value now.
formatted_data[keys[k]].push(raw_data.data[i][keys[k]]);
} else {
// it doesn't exist, create a new one and instantiate an array
// with one entry: the value.
formatted_data[keys[k]] = new Array(raw_data.data[i][keys[k]])
}
}
}
// output for debugging
console.log(formatted_data);
<strong>See javascript console for output</strong>