将 JSON 对象转换为 html 字符串
[英]convert JSON object to html string
问题描述
我有一个 JSON：
const json = {
"name": "superman",
"place": "universe",
"pets": [
{
"id": "1",
"type": "dog",
"name": "Drogo"
},
{
"id": "2",
"type": "cat",
"name": "Cindy"
}
]
};
要求是将其更改为 html 字符串，如下所示：
' <body><div>superman</div><div>universe</div><div><p>1</p><p>dog</p><p>Drogo</p><p>2</p><p>cat</p><p>Cindy</p></div></body> '
我写了下面的函数来解决它。 基本上，我使用 Object.entries 遍历 json 以获得 [key, value] 对，然后将该值附加到 myStr，我的最终字符串变量。 但我不能保留这样形成的字符串。
let myStr = ""; // initialize String
const printString = (o, myStr) => {
if (typeof o === "string") {
myStr += "<div>" + `${o}` + "</div><br>";
}
return myStr;
};
const getString = json => {
for (let [key, value] of Object.entries(json)) {
printString(value, myStr);
if (Array.isArray(value)) {
value.forEach(item => {
printString(item, myStr);
});
}
}
return myStr;
};
const htmlString = "<body>" + getString(json) + "</body>";
console.log(htmlString);
我的逻辑需要一些帮助。 此外，我有几个问题：
i) 如何编写包含所有这些功能的 1 个函数，包括 myStr 变量，以便我的代码是模块化的 ii) 为什么 myStr 不能记住以前的字符串？ iii) 在此类问题中，仅通过特定的 json 对象并对其进行迭代是明智的，还是应该有一个更通用的函数来检查 json 中的对象、字符串或数组，然后相应地生成字符串？
4 个解决方案
解决方案1
1 2019-09-14 20:44:59
您没有在作为对象数组的属性中添加项目，您可以使用Object.values()迭代这些值Object.values()加到<p>标签。
此外，您没有将printString()函数中形成的新字符串重新分配回myStr变量，因此生成的新字符串丢失了。
这是因为 string 是不可变的，将新字符串附加到旧字符串将创建字符串的新实例：
const json = { name: "superman", place: "universe", pets: [ { id: "1", type: "dog", name: "Drogo" }, { id: "2", type: "cat", name: "Cindy" } ] }; let myStr = ""; // initialize String const printString = (o, myStr, tag) => { if (typeof o === "string") { myStr += `<${tag}> ${o} </${tag}>`; }else if(typeof o === "object"){ Object.values(o).forEach(val => myStr += `<${tag}> ${val} </${tag}>`); } return myStr; }; const getString = json => { for (let [key, value] of Object.entries(json)) { if (Array.isArray(value)) { myStr += "<div>" value.forEach(item => { myStr = printString(item, myStr, "p"); }); myStr += "</div>" }else{ myStr = printString(value, myStr, "div"); } } return myStr; }; const htmlString = "<body>" + getString(json) + "</body>"; console.log(htmlString);
解决方案2
1 已采纳 2019-09-14 20:54:45
它看起来有点难看但仍然有效，如果你知道你的数组有多深，那么我不会使用递归。
工作证明： https : //jsfiddle.net/bajuck9y/
JS
let html = '';
for (const key in json) {
if (!Array.isArray(json[key])) {
html += '<div>' + json[key] + '</div>'
} else {
html += '<div>';
for (const item of json[key]) {
for (const key2 in item) {
html += '<p>' + item[key2] + '</p>'
}
}
html += '</div>';
}
}
解决方案3
1 2019-09-14 21:29:03
或者，也许，这样做？
const json = { name: "superman", place: "universe", pets: [ { id: "1", type: "dog", name: "Drogo" }, { id: "2", type: "cat", name: "Cindy" } ] }; function mkhtml(js){ return Object.values(js).map(v=> '<div>'+((typeof v)=='object' ?v.map(e=> '<p>'+Object.values(e).join('</p><p>')+'<p>').join('') :v)+'</div>').join(''); } console.log(mkhtml(json));
同样，使用传统的函数语法：
const json = { name: "superman", place: "universe", pets: [ { id: "1", type: "dog", name: "Drogo" }, { id: "2", type: "cat", name: "Cindy" } ] }; function mkhtml(js){ return Object.values(js).map(function(v){ return '<div>'+((typeof v)=='object' ?v.map(function(e){return '<p>'+Object.values(e).join('</p><p>')+'<p>'}).join('') :v)+'</div>'; }).join(''); } console.log(mkhtml(json));
我刚刚将最后剩余的箭头函数再次转换为“旧”函数形式。
逻辑：
外部.map()适用于存储在变量json中的对象的所有数组Object.values() ：对于每个值v创建一个新的<div> ，然后用值v本身或一系列<p>元素，以防v结果是一个对象（实际上，它是一个对象数组！）在这种情况下， <p>用每个数组元素的对象的值填充。
解决方案4
0 2019-09-14 21:07:31
如果您希望它更加模块化，也许您可以将您的功能拆分为许多小功能助手：
const json = {"name":"superman","place":"universe","pets":[{"id":"1","type":"dog","name":"Drogo"},{"id":"2","type":"cat","name":"Cindy"}]}; // Return a string given string and el args const toEl = (str, el) => `<${el}>${str}</${el}>`; // Call toEl with a string and 'div' param const toDiv = (str) => toEl(str, 'div'); // Call toEl with a string and 'p' param const toPara = (str) => toEl(str, 'p'); // Iterate over the array, and then // iterate over each object calling getPara // for each value function getArr(arr) { return arr.map(obj => { return Object.values(obj).map(v => { return toPara(v); }).join(''); }).join(''); } // Now just join it all together function getHTMLString(obj) { const name = toDiv(obj.name); const place = toDiv(obj.place); const pets = toDiv(getArr(obj.pets)); return `<body>${name}${place}${pets}</body>`; } console.log(getHTMLString(json));
将 HTML 字符串转换为 JSON 对象
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.