如何从 JSON 对象生成 URL？

Question

UPDATE更新了 JSON 模型

我有 2 个 JSON 对象，如下所示：

{
   "scheme":"https",
   "server":"example.com"
}

和

{
   "scheme":"https",
   "server":"example.com",
   "path":"items",
   "item":"apple",
   "itemDetails":[
      {
         "country":"US",
         "year":"2019"
      }
   ]
}

我想将它们变成 URL，例如https://example.com或https://example.com/items?item=apple&country=US&year=2019

我能怎么做？

Answer 1

• 您可以创建一个基于提供的对象创建 URL 的函数。

  解构参数以获取scheme , server , path 。 为path分配一个默认值，因为它是可选的。 使用扩展语法将剩余的未知属性获取到rest变量（诸如item 、 itemDetails等的属性将在 rest 对象内）

• 您可以使用模板文字使用前 3 个变量创建基本 URL

• 要获取查询字符串，您可以使用URLSearchParams构造函数。 它有几个重载。 您可以将查询字符串或对象或条目数组作为参数传递给构造函数。 如果对象是扁平的，您只需执行new URLSearchParams(rest).toString()来创建查询字符串。 但是，由于您有嵌套的数组和对象，我们需要先创建一个条目数组（类似于： [[key1, value1], [key2, value2],...and so on] 。然后字符串将是 key key1=value1&key2=value2 。这些值也将被正确编码以替换空格和特殊字符等）

• 您可以创建一个递归函数来获取嵌套条目。 循环遍历给定对象的条目。 如果当前值是一个Array ，则为Array中的每个对象递归调用该方法并将其推送到条目。 如果值是一个对象，则递归调用该值上的函数。 该函数将返回对象中所有键值对的二维数组。

• 然后只需将条目传递给URLSearchParams即可创建查询字符串。 如果查询字符串不为空，请将其附加到基本 URL 中，前缀为? .

 function createURL({ scheme, server, path = '', ...rest }) { let url = `${scheme}://${server}/${path}`; let param = new URLSearchParams(getEntries(rest)).toString(); if (param) url += "?" + param; return url } function getEntries(o = {}) { const entries = []; for (const [k, v] of Object.entries(o)) { if (Array.isArray(v)) entries.push(...v.flatMap(getEntries)) else if (typeof v === 'object') entries.push(...getEntries(v)) else entries.push([k, v]) } return entries; } console.log(createURL({ scheme: "https", server: "example.com" })) console.log(createURL({ scheme: "https", server: "example.com", path: "items", item: "apple", "itemDetails": [{ "country": "US", "year": "2019" }] }))

Answer 2

也许不是最好的方法，但你可以试试

var myjson = {
       scheme:https,
       server:example.com
};

    var obj = JSON.parse(myjson);
    document.getElementById("#div1").innerHTML = obj.scheme + obj.server;