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中提取“name”和“icon”。我似乎无法找到任何办法。

我知道这可能很乱，但我只是围绕着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..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 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

我知道你是从节点开始的，但我猜你应该使用“reduce”代替那些“for循环”这个案例（这只是我个人的意见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' } }

在javascript中解析JSON对象（键/值对）

5 个答案: