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:

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”

]，