解析JavaScript中的JSON對象（鍵/值對）

Question

我試圖通過編寫一些測試應用程序來了解NodeJS。 到目前為止，我的工作還不錯，但以下是令我絆倒的一件事。

我已經讀取了文件夾的目錄，然后解析每個文件夾中的settings.json文件（這樣我就可以基於文件夾內容動態地構建UI）。 問題是，我似乎無法使用JSON對象“降級”。

例如，來自php的背景，您可以執行以下操作來“逐步”遍歷數組：

<?php
    $arr = [
        'folder1' => 
            [ 'name' => 'test',
              'icon' => 'icon-test'
            ],
        'folder2' => 
            [ 'name' => 'test-2',
              'icon' => 'icon-test-2'
            ]
    ];

    foreach($arr as $k => $v){
        // folder1 level
        foreach($v as $k2 => $v2){
                // name / icon level.
                echo $k2 . ' is ' . $v2;
        }
    }
?>

JS中有等效的東西嗎？ 我可以通過執行以下操作來執行第一個“級別”：

function getDirectories (srcpath) {
  return fs.readdirSync(srcpath)
    .filter(file => fs.lstatSync(path.join(srcpath, file)).isDirectory())
}
var d = getDirectories('modules');
var modules = {};

// the following reads the json in each dir into an object like:
// { 'dirname': { 'key1': 'val1', 'key2': 'val2' }, 'dirname2'... }
for(var p in d){
    modules[d[p]] = JSON.parse(fs.readFileSync('./modules/'+d[p]+'/config.json', 'utf8'));
}

for(var k in modules){
    console.log(k);
}

但理想情況下，我需要從JSON中提取“名稱”和“圖標”。 我似乎找不到任何辦法。

我知道這可能很麻煩，但是我只是想着NodeJS。 為了清楚起見，下面是目錄結構和我的簡單JSON文件：

模塊目錄結構

modules
|____ test
      |____ config.json
|____ test-2
      |____ config.json

config.json（示例）

{
  "name": "test",
  "icon": "test-icon"
}

Answer 1

for(var module of modules){
   console.log(module.name,module.icon);
   //or over all
   for(var value of module) console.log(value);
}

for ... of循環遍歷值。 與for..in（循環鍵）：

for(var name in modules){
  var module=modules[name];
  for(key in module){
    console.log(name+"/"+key+":"+module[key]);
  }
}

Answer 2

您當前正在使用for in循環，並且在可行的同時，當遍歷數組時，理想情況下希望for next循環。

這是一個例子：

for (var i = 0; i < folders.length; i++) {
    var folder = folders[i]

    /* work with directory .. */

    for (var j = 0; j < folder.items.length; j++){
        var item = folder.items[j]

        /* work with item.. */
    }
}

遍歷數組時不使用for in的原因是因為數組可以包含實際上不是數組一部分的對象，即函數。

使用for in循環，您將遍歷包含的數組，然后遍歷該數組的任何對象/函數。

for next循環，將僅遍歷數組內容。

Answer 3

我不知道您只有1個子目錄，還是可以多個？ 如果可以是任何深度，請使用遞歸函數，例如：

function iterateFolder(array) {
  for (var i = 0; i < array.length; i++) {
    if ($.isArray(array[i]))
      iterateFolder(array[i]);
    else
      //Add to global variable for example or parse just the values
  }
}

Answer 4

嘗試做一個for循環而不是for循環

            // example from a old proj
            // your code has in 
            // if you are using es6 syntax, you should use let instead of var
            for (let element of section.elements) {
                let $element;
                $element = $parent.find(`label[for=${element._data_text}]`);                    
                $element.html(`<span>${element[lang]}</span>`);
            }

這是我的json的工作示例

import lang_data from "../data/languages.json";
$(function () {
    console.log("onload hit");
    $("[data-language]").on("click", function () {
        let $this = $(this);
        let data = $this.data();
        let lang = data.language;
        $("[data-language]").removeClass("active");
        $this.addClass("active");
        switchLanguage(lang);
        return true;
    });
})

function switchLanguage(lang) {
    for (let section of lang_data.sections) {
        // the form is loaded by JS. I could not add a data-text to it.
        if (section.id === "form1_handle_after") {
            let $parent = $("#form1");
            for (let element of section.elements) {
                let $element;
                if (element._data_text == "c-submit-button") {                    
                    $element = $parent.find(`#${element._data_text}`);                    
                } else {
                    $element = $parent.find(`label[for=${element._data_text}]`);                    
                }
                $element.html(`<span>${element[lang]}</span>`);
            }
        } else {
            let $parent = $(`#${section.id}`);
            for (let element of section.elements) {
                let $element = $parent.find(`[data-text=${element._data_text}]`);
                // text needs to be highlighted
                if(element.mark !== null){                    
                    let string = element[lang];                    
                    let find = element.mark[lang];
                    let new_string = string.replace(find, `<mark>${find}</mark>`)
                    // I assume it is wrapped in quotes
                    $element.html(`<span>&ldquo;${new_string}&rdquo;</span>`);
                }else{
                    $element.html(`<span>${element[lang]}</span>`);
                }

            }
        }

    }
}

這是我的數據樣本

{
"sections": [
    {
        "id": "navbar_main",
        "elements": [
            {
                "_data_text": "question",
                "eng": "Have a Question?",
                "chi": "有個問題？",
                "mark": null
            }
        ]
    }
  ]
}

您可以在http://professional.ongeo.msu.edu/查看html和標記。

Answer 5

我知道您是從節點開始的，但在這種情況下，您應該使用“減少”而不是那些“循環”（這只是我個人的觀點xd）。 您可以找到許多有關如何使用此功能的指南，變量“ d”是一個數組，所有數組都具有“ reduce”功能。

像這樣：

const modules = d.reduce((all, current) => {
  all[current] = current || {}
  all[current] = JSON.parse(fs.readFileSync(__dirname + '/modules/'+ current +'/config.json', 'utf8'))
  return all;
}, {})

我測試它創建了一些文件夾，並給了我這個：

​​​​​{ test: { name: 'test', icon: 'test-icon' },​​​​​ ​​​tes_2: { name: 'test-2', icon: 'test-icon-2' } }​​​​​