如何将JSON内容逐行显示到文本框 是否需为每个字段定义变量

关于是否需要单独为每个字段定义变量 #

完全没必要。
给每个JSON字段单独硬编码定义变量属于冗余度极高的写法，一旦后续JSON结构调整、字段增减，你需要同步修改所有对应的变量定义，维护成本极高。用递归遍历的方式可以自动适配任意结构的JSON，不需要提前感知字段名、嵌套层级，适配性和维护性都好很多。

具体实现方法 #

核心逻辑非常简单：

• 先把JSON字符串解析为当前开发语言对应的对象/字典结构
• 递归遍历整个结构，遇到嵌套的对象、数组就继续向下钻取，遇到字符串、数字、布尔值这类基础类型的叶子节点，就把对应的键和值拼成无缩进的单行文本
• 把所有生成的单行文本用换行符拼接，直接赋值给文本框组件即可

以最常见的前端浏览器场景为例，可直接运行的实现代码如下：

// 你的原始JSON数据
const rawJson = `{
  "basics": {
    "name": "Your first and last name",
    "label": "",
    "picture": "",
    "email": "Your email address",
    "phone": "A phone number, with any formatting you like. E.g. (555) 555-5555.",
    "degree": "",
    "website": "Your website URL",
    "summary": "A one-sentence to one-paragraph overview text. Do not include any line-breaks.",
    "location": {
      "address": "Your street address or mailing address",
      "postalCode": "Your postal code (ZIP in the U.S.)",
      "city": "Your city",
      "countryCode": "Your country (e.g. USA)",
      "region": "Your region (state in the U.S.)"
    },
    "profiles": [
      {
        "network": "A social media or other profile that you would like to include (e.g. LinkedIn, Twitter)",
        "username": "Your username on this network",
        "url": "A URL to your user profile page"
      }
    ]
  }
}`;

// 解析JSON为JS对象
const jsonData = JSON.parse(rawJson);

/**
 * 递归遍历生成无缩进的逐行文本
 * @param {object|Array} target 待遍历的对象/数组
 * @param {string} parentKey 父级键名，用于区分重名字段，不需要可删掉
 * @param {Array} result 存结果的数组
 * @returns {Array} 所有行的文本集合
 */
function getFlatLines(target, parentKey = '', result = []) {
  Object.entries(target).forEach(([key, value]) => {
    const fullKey = parentKey ? `${parentKey}.${key}` : key;
    // 嵌套结构继续递归
    if (value && typeof value === 'object') {
      getFlatLines(value, fullKey, result);
    } else {
      // 叶子节点拼成单行，不添加任何缩进
      result.push(`${fullKey}: ${value}`);
    }
  })
  return result;
}

// 拼接所有行赋值给文本框
document.querySelector('textarea').value = getFlatLines(jsonData).join('\n');

运行后文本框内的输出效果为逐行排列的键值对，无任何缩进，格式示例：

basics.name: Your first and last name
basics.label: 
basics.picture: 
basics.email: Your email address
basics.phone: A phone number, with any formatting you like. E.g. (555) 555-5555.
basics.degree: 
basics.website: Your website URL
basics.summary: A one-sentence to one-paragraph overview text. Do not include any line-breaks.
basics.location.address: Your street address or mailing address
basics.location.postalCode: Your postal code (ZIP in the U.S.)
basics.location.city: Your city
basics.location.countryCode: Your country (e.g. USA)
basics.location.region: Your region (state in the U.S.)
basics.profiles.0.network: A social media or other profile that you would like to include (e.g. LinkedIn, Twitter)
basics.profiles.0.username: Your username on this network
basics.profiles.0.url: A URL to your user profile page

如果不需要展示父级键名、数组下标，把递归方法里的fullKey相关逻辑删掉，直接用当前key拼接值即可。其他技术栈（Python、Java、小程序等）的实现逻辑完全一致，只是语法和文本框赋值的API有区别，核心递归遍历的思路通用。

内容的提问来源于stack exchange，提问作者lenard backup