如何在HTML文档或console.log中访问数组内的text属性值

首先我们假设你已经将题中的数组赋值给变量responseData，变量定义示例如下：

const responseData = [
  {
    "detectedLanguage": {
      "language": "hin", 
      "score": 1.0
    },
    "translations": [
      {"text":"I am a boy", "to":"en"}
    ]
  }
]

1. 在console.log中输出 #

直接按层级访问属性即可，代码如下：

console.log(responseData[0].translations[0].text)

运行后控制台会直接输出目标值I am a boy。
如果需要兼容数组为空的异常场景，可以用可选链写法避免报错：

console.log(responseData?.[0]?.translations?.[0]?.text)

层级访问逻辑说明：

• 第一层是数组结构，取第一个元素用[0]
• 访问元素下的translations属性，它也是数组结构，取第一个翻译结果用[0]
• 最后取该翻译结果对象的text属性即可拿到目标值

2. 在HTML中渲染 #

原生JS实现 #

首先准备HTML容器：

<p>翻译结果：<span id="translationResult"></span></p>

再用JS将值插入到容器中：

const targetText = responseData[0].translations[0].text
document.getElementById('translationResult').textContent = targetText

常见框架写法 #

• Vue模板中直接写：{{ responseData[0].translations[0].text }}
• React JSX中直接写：{responseData[0].translations[0].text}

内容的提问来源于stack exchange，提问作者Bhargab Hazarika