angularjs-解析分组的json

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:

fiddler

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”
]，