javascript - 遍历JSON对象构建JSTree

Question

我有一个 JSON 对象，想要遍历它，使其与 JSTree 的结构匹配:

原始 JSON:

{
	"analogBasebandProcessorBoardType": "Test_BOARD",
	"tuners": {
		"tuner1": "RFE_MAIN",
		"tuner2": "MAX93"
	},
	"allowedSoftConfigs": ["30-16", "30-29", "10-22"]
}

它应该看起来像这样:

{
    'core': {
      'data': [
      {
          'text': 'analogBasebandProcessorBoardType',
          'children': 
                      [
                        {
                          'text': 'Test_BOARD'
                        }
                      ]
      }, 
      {
          'text': 'tuners',
          'children': 
                      [{
                        'text': 'Tuner1',
                        'children': 
                        [{
                          'text': 'RFE_MAIN'
                        }]
                      },
                       {
                         'text': 'Tuner2',
                         'children': 
                         [{
                           'text': 'MAX93'
                         }]
                       }
                      ]
       },

       {
          'text': 'allowedSoftConfigs',
          'children': 
          						[
                        {
                            'text': '30-16'
                         }, 
                         {
                            'text': '30-29'
                         },
                         {
                            'text': '10-22'
                         }
							         ]
        },

      ]
    }
  }

我认为解决这个问题的唯一方法就是遍历。我已经尝试过了，但这并不完全是我想要的，但我认为我距离解决方案并不遥远。

这是正在生成的 JSON:

{
	"core": {
		"data": {
			"analogBasebandProcessorBoardType": {
				"text": "analogBasebandProcessorBoardType",
				"children": [{
					"text": "Test_BOARD"
				}],
				"tuners": {
					"tuner1": {
						"text": "tuner1",
						"children": [{
							"text": "RFE_MAIN"
						}],
						"tuner2": {
							"text": "tuner2",
							"children": [{
								"text": "MAX93"
							}],
							"allowedSoftConfigs": {
								"0": {
									"1": {
										"2": {
											"text": "2",
											"children": [{
												"text": "10-22"
											}]
										},
										"text": "1",
										"children": [{
											"text": "30-29"
										}]
									},
									"text": "0",
									"children": [{
										"text": "30-16"
									}]
								}
							}
						}
					}
				}
			}
		}
	}
}

我的代码始终使用“名称”作为数据数组的键。如果没有 key 的话也是正确的。但我不确定这种行为是在哪里引起的。

如果有人能看一下就太好了，因为我不知道如何解决它。这是完整的代码，但我认为在 jsfiddle 中查看更容易:

//function to add something to objects with a string path
function assign(obj, prop, value) {
    if (typeof prop === "string")
        prop = prop.split(".");

    if (prop.length > 1) {
        var e = prop.shift();
        assign(obj[e] =
                 Object.prototype.toString.call(obj[e]) === "[object Object]"
                 ? obj[e]
                 : {},
               prop,
               value);
    } else
        obj[prop[0]] = value;
}



$(function() {
  // 6 create an instance when the DOM is ready

var tbjsonstring = '{	"analogBasebandProcessorBoardType": "Test_BOARD",	"tuners": {		"tuner1": "RFE_MAIN","tuner2": "MAX93"	},	"allowedSoftConfigs": ["30-16", "30-29", "10-22"]}';

var tbjson = JSON.parse(tbjsonstring);

var computedJSON = {
    'core': {
      'data': [
      ]
    }
  }
var path = "core.data";

console.log(tbjson);
(function traverse(o) {
var z = 0;
    for (var i in o) {
      data0 = {
                  'text': i,
             }
       data1 = {
                  'text': o[i],
             }      
      if(traversed == 1){
      console.log("traversed" + o[i]);
      //	assign(computedJSON,path,data1);
        traversed = 0;
      }else{
     //   assign(computedJSON,path,data0);
      }       
     
      console.log('key : ' + i + ', value: ' + o[i]);

			//console.log(path);
			path = path+"."+i;
      z++;
      if (o[i] !== null && typeof(o[i])=="object") {
        //going on step down in the object tree!!
        var traversed = "1";
        traverse(o[i]);
      }else{
      //key value pair, no children
      data = {};
      data = {
          'text': i,
          'children': [{
            'text': o[i]
          }]
      }
      assign(computedJSON,path,data);
      }  
    }
  })
  (tbjson);

//print to the console
console.log(JSON.stringify(computedJSON));





//This is the working json, computedJSON should looke like this:
  var jstreejson = {
    'core': {
      'data': [
      {
          'text': 'analogBasebandProcessorBoardType',
          'children': 
                      [
                        {
                          'text': 'Test_BOARD'
                        }
                      ]
      }, 
      {
          'text': 'tuners',
          'children': 
                      [{
                        'text': 'Tuner1',
                        'children': 
                        [{
                          'text': 'RFE_MAIN'
                        }]
                      },
                       {
                         'text': 'Tuner2',
                         'children': 
                         [{
                           'text': 'MAX93'
                         }]
                       }
                      ]
       },

       {
          'text': 'allowedSoftConfigs',
          'children': 
          						[
                        {
                            'text': '30-16'
                         }, 
                         {
                            'text': '30-29'
                         },
                         {
                            'text': '10-22'
                         }
							         ]
        },

      ]
    }
  }


//jstree initialization
  $('#jstree').jstree(jstreejson);
  $('#tbjstree').jstree(computedJSON);
  // 7 bind to events triggered on the tree
  $('#jstree').on("changed.jstree", function(e, data) {
    console.log(data.selected);
  });

});

The won't run in the stackoverflow-snippet-editor (even with loaded js/css files) so please visit jsfiddle for a working demo:
<a href='https://jsfiddle.net/dnffx4g8/6/' target='_blank'>JSFiddle Demo</a>

jsfiddle-link: https://jsfiddle.net/dnffx4g8/6/

Answer 1

您可以使用迭代递归方法，使用一个函数检查数组和对象并相应地进行迭代。

function buildObject(source) {
    if (Array.isArray(source)) {
        return source.reduce(function (r, a) {
            if (a !== null && typeof a === 'object') {
                return r.concat(buildObject(a));
            }
            r.push({ text: a });
            return r;
        }, []);
    }
    if (source !== null && typeof source === 'object') {
        return Object.keys(source).map(function (k) {
            return {
                text: k,
                children: buildObject(source[k])
            };
        });
    }
    return [{ text: source }];
}

var data = { "analogBasebandProcessorBoardType": "Test_BOARD", "tuners": { "tuner1": "RFE_MAIN", "tuner2": "MAX93" }, "allowedSoftConfigs": ["30-16", "30-29", "10-22"], "PathValue": [{ "links": ["in1->GSES_1.in1", "GSES_1.out1->GSES_1.in1", "GSES_1.out1->out1_1"], "ParamFile": "IN1_OUT12.txt" }, { "links": ["in1->GSES_1.in1", "GSES_1.out2->GSES_2.in1", "GSES_2.out1->out1_2"], "ParamFile": "IN1_OUT52.txt" }] },
    result = { core: { data: buildObject(data) } };

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

ES6

function buildObject(source) {
    if (Array.isArray(source)) {
        return source.map(text => ({ text }));
    }
    if (source !== null && typeof source === 'object') {
        return Object.keys(source).map(text => ({ text, children: buildObject(source[text])}));
    }
    return [{ text: source }];
}

var object = { analogBasebandProcessorBoardType: "Test_BOARD", tuners: { tuner1: "RFE_MAIN", tuner2: "MAX93" }, allowedSoftConfigs: ["30-16", "30-29", "10-22"] },
    result = { core: { data: buildObject(object) } };
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }