任意Json转成无序列表的方法示例

下面是详细讲解“任意Json转成无序列表的方法示例”的完整攻略。

1. 理解Json数据格式

首先，我们需要了解Json数据格式。Json是一种轻量级的数据交换格式，它可以表示对象、数组、字符串、数字、布尔值和null。Json对象由花括号{}包裹，对象中包含各种键值对，键值对之间用逗号分隔；Json数组由方括号[]包裹，数组中包含各种数据类型，数据之间用逗号分隔。

例如，下面是一个包含对象和数组的Json数据：

{
  "name": "Tom",
  "age": 18,
  "hobbies": ["coding", "reading", "swimming"],
  "address": {
    "province": "Beijing",
    "city": "Haidian",
    "street": "Xueyuan Road"
  }
}

2. 使用JavaScript解析Json数据

接下来，我们可以使用JavaScript来解析Json数据。JavaScript提供了JSON对象，可以用来进行Json数据的序列化和反序列化。JSON.parse()方法可以将Json字符串解析为JavaScript对象，JSON.stringify()方法可以将JavaScript对象序列化为Json字符串。

例如，我们可以使用下面的代码将上面的Json数据解析为JavaScript对象：

const jsonData = '{"name":"Tom","age":18,"hobbies":["coding","reading","swimming"],"address":{"province":"Beijing","city":"Haidian","street":"Xueyuan Road"}}';
const jsonObject = JSON.parse(jsonData);

解析后的jsonObject对象如下：

{
  name: "Tom",
  age: 18,
  hobbies: ["coding", "reading", "swimming"],
  address: {
    province: "Beijing",
    city: "Haidian",
    street: "Xueyuan Road"
 }
}

3. 将Json转为无序列表

最后，我们可以将解析后的JavaScript对象转为无序列表。这里给出两个示例说明。

示例一：使用递归方式转换

我们可以使用递归方式遍历JavaScript对象，将属性名和属性值分别添加到无序列表中。如果属性值还是一个对象或数组，就继续递归。

// 转换Json为无序列表
function convertJsonToUl(jsonObject) {
  let ul = '<ul>';
  for (let key in jsonObject) {
    let value = jsonObject[key];
    if (typeof value === 'object') {
      value = convertJsonToUl(value);
    }
    ul += '<li><strong>' + key + '</strong>: ' + value + '</li>';
  }
  ul += '</ul>';
  return ul;
}

// 示例用法
const jsonData = '{"name":"Tom","age":18,"hobbies":["coding","reading","swimming"],"address":{"province":"Beijing","city":"Haidian","street":"Xueyuan Road"}}';
const jsonObject = JSON.parse(jsonData);
const ulHtml = convertJsonToUl(jsonObject);
console.log(ulHtml);

执行以上代码，会输出以下的无序列表HTML代码：

<ul>
  <li><strong>name</strong>: Tom</li>
  <li><strong>age</strong>: 18</li>
  <li><strong>hobbies</strong>:
    <ul>
      <li><strong>0</strong>: coding</li>
      <li><strong>1</strong>: reading</li>
      <li><strong>2</strong>: swimming</li>
    </ul>
  </li>
  <li><strong>address</strong>:
    <ul>
      <li><strong>province</strong>: Beijing</li>
      <li><strong>city</strong>: Haidian</li>
      <li><strong>street</strong>: Xueyuan Road</li>
    </ul>
  </li>
</ul>

示例二：使用stack栈方式转换

我们也可以使用stack栈方式遍历JavaScript对象，使用循环代替递归。当我们遍历到一个对象或数组时，将其转换为<ul>标签，并将其弹出栈；当我们遍历到一个属性值时，将其转换为<li>标签，添加到栈顶的<ul>标签之中。

// 转换Json为无序列表
function convertJsonToUl(jsonObject) {
  let stack = [[jsonObject, '<ul>']];  // 初始化stack栈
  let ulHtml = '';
  while (stack.length) {  // 当stack不为空时
    let [object, tag] = stack.pop();  // 从stack中取出一个对象和对应标签
    tag = tag.replace(/<ul>$/, '');  // 去掉tag中的<ul>标签
    for (let key in object) {
      let value = object[key];
      if (typeof value === 'object') {  // 如果value是一个对象或数组
        stack.push([value, tag + '<ul>']);  // 将其转为<ul>标签并压入stack栈
      } else {
        ulHtml = `${ulHtml}${tag}<li><strong>${key}</strong>: ${value}</li>`;  // 否则直接转为<li>标签
      }
    }
  }
  return ulHtml + '</ul>';
}

// 示例用法
const jsonData = '{"name":"Tom","age":18,"hobbies":["coding","reading","swimming"],"address":{"province":"Beijing","city":"Haidian","street":"Xueyuan Road"}}';
const jsonObject = JSON.parse(jsonData);
const ulHtml = convertJsonToUl(jsonObject);
console.log(ulHtml);