I have this JSON structure:
{
"2014": [
"2014-01",
"2014-02",
"2014-03",
...
],
"2015": [
"2015-01",
"2015-02",
"2015-03",
...
]
}
... and a need parse that JSON to an HTML structure like this, with or without Jquery.
Thank you!
UPDATE: I updated the JSON
收起翻译
译文
我有这个JSON结构:</ p>
{
“ 2014”:[
“ 2014-01”,
“ 2014-02”,
“ 2014-03”,
...
],
“ 2015”:[
“ 2015-01”,
“ 2015-02”,
“ 2015-03”,
...
]
}
</ code> </ pre>
...,并且需要将JSON解析为这样的HTML结构(带有或不带有Jquery)。</ p>
<选择name =“ valueAA” id =“ valueAA”>
2014年1月</ option>
2014年2月</ option>
2014年3月</ option>
...
</ optgroup>
2015年1月</ option>
2015年2月</ option>
2015年3月</ option>
...
</ optgroup>
</ select>
</ code> </ pre>
谢谢! </ p>
更新:我更新了JSON </ p>
</ div>
编辑于:2020.05.04 14:10
jsonangularjsjavascriptajaxjquery
分享|评论0|收藏|浏览1|02 weixin 33749242
weixin_33749242
声望: 0
4个回答
回复数排序
You can do this with a bit of jQuery and moment.js for your date formatting:
fiddle
HTML:
JS:
var object = {
"2014": [
"2014-01",
"2014-02",
"2014-03"
],
"2015": [
"2015-01",
"2015-02",
"2015-03"
]
};
var $select = $('#dates');
$.each(object, function(year, dates) {
var $optgroup = $('
') .val(date) .text( moment(date, 'YYYY-MM').format('MMM YYYY') ) ); }); $select.append($optgroup); }); 展开翻译 编辑于:2015.11.18 13:13 评论 0|4csdnceshi67 bug^君 声望: 70699
Solution in javascript compatible with old browsers:
var data = {
dataLabel: ['valueData']
};
(function() {
'use strict';
var label,
value,
// other variables
select = document.createElement('select'),
optgroup,
option,
date;
select.id = 'valueAA';
select.name = 'valueAA';
for (label in data)
if (data.hasOwnProperty(label)) {
// what you want to do with labels
optgroup = document.createElement('optgroup')
optgroup.setAttribute('label', label);
select.appendChild(optgroup);
for (value in data[label])
if (data[label].hasOwnProperty(value)) {
// what you want to do with values
date = new Date(value);
option = document.createElement('option')
option.setAttribute('value', value);
optgroup.appendChild(option);
optgroup.innerHTML = date.toDateString().replace(/^.\s(.).\s.\s(.*)$/, '$1 $2');
}
}
window.console.log(select);
document.body.appendChild(select);
}());
Using for...in
You can use For...in to loop the object keys.
var data = { dataLabel : [ 'valueData' ] },
label,
value;
// other variables
for (label in data) if (data.hasOwnProperty(label)) {
// what you want to do with labels
for (value in data[label]) if (data[label].hasOwnProperty(value)) {
// what you want to do with values
}
}
In order to create DOM elements you can use createElement and appendChild. This is how you add it to the script:
// other variables
var select = document.createElement('select'),
optgroup,
option,
date;
select.id = 'valueAA';
select.name = 'valueAA';
create the
// what you want to do with labels
optgroup = document.createElement('optgroup')
optgroup.setAttribute('label', label);
select.appendChild(optgroup);
create the
// what you want to do with values
date = new Date(value);
option = document.createElement('option')
option.setAttribute('value', value);
optgroup.appendChild(option);
optgroup.innerHTML = date.toDateString().replace(/^.\s(.).\s.\s(.*)$/,'$1 $2');
编辑于:2015.11.18 13:17 评论 0|1weixin_33722405 weixin_33722405 声望: 0
use recursion:
var json = {
"2014": [
"2014-01",
"2014-02",
"2014-03"
],
"2015": [
"2015-01",
"2015-02",
"2015-03"
]
};
function loadSelect(data) {
for (var key in data) {
if (data[key].constructor == Array) {
var optG = document.createElement('optgroup'); // optgroup creation
optG.setAttribute('label', key); // setting the label on optgroup
for(var i = 0; i < data[key].length; i++){ // loop over the each array
var opt = document.createElement('option'); // create option
opt.setAttribute("value", data[key][i]); // set the value attribute
opt.innerHTML = data[key][i]; // apply the text of the option
optG.appendChild(opt); // append the option in the optgroup
}
document.querySelector('#valueAA').appendChild(optG); // finally after iteration push the
// optgroup with options to the select element.
loadSelect(data[key]); // call it recursively.
}
}
}
loadSelect(json);
收起翻译 译文
使用递归:</ p>
</ p>
var json = {
“ 2014”:[
“ 2014-01”,
“ 2014-02”,
“ 2014-03”
],
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。