如何在React中映射嵌套的JSON对象键?

时间:2019-10-18 09:11:56

标签: json reactjs

我有这样的杰森。 如果键是“方翼”,则需要进入子对象。 “ alanlar”嵌套对象有一定的确定性,但我不知道有多少嵌套的“ alanlar”是json。 Json的结构如下

示例:“ kimlikKarti”对象具有“ alanlar”。
路径->(kimlikKarti.musteriSoyadi, kimlikKarti.musteriAdi )。

第二步:“ musteriAdi” 具有“天使”。 路径->( musteriAdi.alan1 )。

第三步“ alan1” 具有“ alanlar”。 路径->( alan1.alan2

完整路径-> kimlikKarti.musteriAdi.alan1.alan2

我需要循环嵌套多少个“方舟”对象。并推送一个字符串列表所有完整路径。路径和全路径只是一个字符串。

实际上,我真正需要的是嵌套对象基于“ alanlar”的concat名称。

{
                "alanlar": {
                    "kimlikKarti": {
                        "alanAdi": "kimlikKarti",
                        "alanEtiketi": "Kimlik Kartı",
                        "aciklama": "Ad, soyad gibi kimlik bilgilerini içeren bir form alan grubu",
                        "alanlar": {
                            "musteriSoyadi": {
                                "alanAdi": "musteriSoyadi",
                                "alanEtiketi": "Müşteri Soyadı",
                                "aciklama": "Başvuru sahibinin soyadı"
                            },
                            "musteriAdi": {
                                "alanAdi": "musteriAdi",
                                "alanEtiketi": "Müşteri Adı",
                                "aciklama": "Başvuru sahibinin adı",
                                "alanlar": {
                                 "alan1": {
                                   "alanAdi": "Alan Adı",
                                   "alanlar": {
                                     "alan2":{
                                       "alanSon": "Son Alan",
                                       "alanAdi": "Alan Adı"
                                      }
                                  }
                                }
                              }
                            }
                        }
                    },
                    "basvuruTarihi": {
                        "alanAdi": "basvuruTarihi",
                        "alanEtiketi": "Başvuru Tarihi",
                        "aciklama": "Formun doldurulduğu tarih",
                        "alanlar": {
                            "alan2": {
                                "alanAdi": "musteriSoyadi",
                                "alanEtiketi": "Müşteri Soyadı",
                                "aciklama": "Başvuru sahibinin soyadı",
                            },
                            "alan1": {
                                "alanAdi": "musteriAdi",
                                "alanEtiketi": "Müşteri Adı",
                            }
                        }
                    }
                }
            }

我需要这样的映射结构。

  

kimlikKarti.musteriSoyadi

     

kimlikKarti.musteriAdi.alan1.alan2

     

basvuruTarihi.alan2

     

basvuruTarihi.alan1

2 个答案:

答案 0 :(得分:0)

const getPaths = (primeKey, obj, paths = []) => {
    for (key in obj) {
        obj[key][primeKey] ?
            paths.push(key + "/" + getPaths(primeKey, obj[key][primeKey]))
            :
            paths.push(key)
    }
    return paths;
}

console.log(getPaths('alanlar', data['alanlar'])) 

输出:

[ 'kimlikKarti/musteriSoyadi,musteriAdi/alan1/alan2',
  'basvuruTarihi/alan2,alan1' ]

表示:

kimlikKarti / musteriSoyadi

kimlikKarti / musteriAdi / alan1 / alan2

basvuruTarihi / alan1

basvuruTarihi / alan2

答案 1 :(得分:0)

这是我的解决方法。

const getPaths = (primeKey: string, obj: any, paths: any = []) => {
        for (var key in obj) {
            obj[key][primeKey] ?
                paths.push(key + "/" + getPaths(primeKey, obj[key][primeKey]))
                :
                paths.push(key)
        }
        return paths;
    }
    var pathList = getPaths('alanlar', obj['alanlar']);
    var pathArray = [];
    for (var i = 0; i < pathList.length; i++) {
        var paths = pathList[i].split(',');
        pathArray.push(paths);
    }

    let path: any, subPath: any;
    var parseObjectKeys = (obj: any, firstItem: any) => {
        for (var prop in obj) {
            if (firstItem in obj) {
                if (firstItem == prop) {
                    path = subPath;
                }
            }
            else {
                subPath = obj.alanAdi;
                var sub = obj[prop];
                if (typeof (sub) == "object") {
                    parseObjectKeys(sub, firstItem);
                }
            }
        }
        return path;
    }

    var parentObjKey, fullPath, pathItem;
    const getKey = (paths: any) => {
        var allPathList = [];
        for (var t = 0; t < paths.length; t++) {
            pathItem = paths[t];
            for (var a = 0; a < pathItem.length; a++) {
                var path = [];
                var firstItem = pathItem[a].split('/')[0];
                var fullItem = pathItem[a].replace(new RegExp("/", "g"), '.');
                parentObjKey = parseObjectKeys(obj, firstItem);
                if (typeof parentObjKey == 'undefined') {
                    allPathList.push(pathItem[a].replace(new RegExp("/", "g"), '.'));
                }
                else {
                    while (typeof parentObjKey != 'undefined') {
                        path.push(parentObjKey);
                        parentObjKey = parseObjectKeys(obj, parentObjKey);
                    }
                    var reversedPath = path.reverse();
                    fullPath = reversedPath.join('.') + '.' + fullItem;
                    allPathList.push(fullPath);
                }
            }
        }
        return allPathList;
    }

此列表正是我所需要的。

var keyList = getKey(pathArray);