Javascript循环遍历对象以查找匹配对url

Question

我正在做一个 reactjs 项目——我在其中说了一个像“/en/how-it-works”这样的英文网址，并希望遍历 json 树以找到设置此链接的位置/子级别-- 并找到它的德语匹配对。

所以基本上 - 一个给定英文 url 的函数，返回德文 url

所以——

lng - 返回 de 当前语言 - zh pairUrl - /en/how-it-works

返回 /de/anleitung

或

lng - 返回 en 当前语言 pairUrl - /de/beliebte-projekte/bundle1

return /en/popular-projects/bundle1

//功能

getLanguagePair (lng, currentLng, pairUrl) {
    //  'find url in json tree'
    console.log('linkTreeObject', linkTreeObject.langs)

    var obj = {}
    //find position in tree
    if(currentLng === 'de'){
      obj = linkTreeObject.langs[0].lines.menu
    } else {
      obj = linkTreeObject.langs[1].lines.menu
    }

    var pos = []
    for (var k in obj) {
      if (!obj.hasOwnProperty(k)) continue
      if (obj[k].link === pairUrl) {
        pos[k]
      }
    }
    console.log('pos' , pos)

    if (lng === 'de') {
      return '/de/link'
    } else {
      return '/en/link'
    }
}

//json文件

{
    "langs" : [
        {
            "lang"  : "de",
            "lines" : {
                "menu" : [
                    {
                        "title": "Anleitung",
                        "link": "/de/anleitung",
                        "children" : []
                    },
                    {
                        "title": "Beliebte Projekte",
                        "link": "/de/beliebte-projekte",
                        "children" : [
                            {
                                "title" : "Bundle1",
                                "link"  : "/de/beliebte-projekte/bundle1"
                            },
                            {
                                "title" : "Bundle2",
                                "link"  : "/de/beliebte-projekte/bundle2"
                            }
                        ]
                    }
                ],
                "sign_in"       : "Login"
            }
        },
        {
            "lang"  : "en",
            "lines" : {
                "menu" : [
                    {
                        "title": "How it works",
                        "link": "/en/how-it-works",
                        "children" : []
                    },
                    {
                        "title": "Popular Projects",
                        "link": "/en/popular-projects",
                        "children" : [
                            {
                                "title" : "Bundle1",
                                "link"  : "/en/popular-projects/bundle1"
                            },
                            {
                                "title" : "Bundle2",
                                "link"  : "/en/popular-projects/bundle2"
                            }
                        ]
                    }
                ],
                "sign_in"       : "Sign in"
            }
        }
    ]
}

Answer 1

您必须同时循环遍历“en”和“de”并使用递归，因为您有嵌套链接。这是我的版本。我已经取出了 'en' 和 'de' 数组并在函数中使用它们。

var obj ={
    "langs" : [
        {
            "lang"  : "de",
            "lines" : {
                "menu" : [
                    {
                        "title": "Anleitung",
                        "link": "/de/anleitung",
                        "children" : []
                    },
                    {
                        "title": "Beliebte Projekte",
                        "link": "/de/beliebte-projekte",
                        "children" : [
                            {
                                "title" : "Bundle1",
                                "link"  : "/de/beliebte-projekte/bundle1"
                            },
                            {
                                "title" : "Bundle2",
                                "link"  : "/de/beliebte-projekte/bundle2"
                            }
                        ]
                    }
                ],
                "sign_in"       : "Login"
            }
        },
        {
            "lang"  : "en",
            "lines" : {
                "menu" : [
                    {
                        "title": "How it works",
                        "link": "/en/how-it-works",
                        "children" : []
                    },
                    {
                        "title": "Popular Projects",
                        "link": "/en/popular-projects",
                        "children" : [
                            {
                                "title" : "Bundle1",
                                "link"  : "/en/popular-projects/bundle1"
                            },
                            {
                                "title" : "Bundle2",
                                "link"  : "/en/popular-projects/bundle2"
                            }
                        ]
                    }
                ],
                "sign_in"       : "Sign in"
            }
        }
    ]
};
var en = obj.langs[1].lines.menu;
var de = obj.langs[0].lines.menu;

function GetUrl(enUrl, enMenu, deMenu)
{
  var deUrl;
  for(var i = 0; i < enMenu.length; i++)
  {
  	if(enMenu[i].link == enUrl)
    {
    	deUrl = deMenu[i].link;
      break;
    }
    else
    {
    	if(enMenu[i].children && enMenu[i].children.length > 0)
      {
      	deUrl = GetUrl(enUrl,enMenu[i].children, deMenu[i].children )
      }
    }
  }
  
  return deUrl;
}

console.log(GetUrl("/en/how-it-works", en, de));
console.log(GetUrl("/en/popular-projects", en, de));
console.log(GetUrl("/en/popular-projects/bundle1", en, de));
console.log(GetUrl("/en/popular-projects/bundle2", en, de));