如何将 querySelectorAll 节点的文本转换为 JSON 或 CSV

Question

我在 querySelectorAll 中获取 orderID 和 Name 的两个节点列表。这是我的选择器 javascript 代码document.querySelectorAll("orderid").forEach(a => alert(a.textContent));document.querySelectorAll("name").forEach(a => alert(a.textContent));我收到每个订单 ID 和名称的警报，仅用于测试目的。我想要的是为 orderid 和 name 的文本内容创建一个 Json 或 csv，稍后我将使用它在 Mysql 数据库中发送。现在我想要 json 像这样的东西{"1":[ "orderid", "name" ],"2":[ "orderid", "name" ]}或者{"orderid":[ "name" ],"orderid":[ "name" ]}或者任何其他适合稍后通过 PHP 上传到 MySQL 的文件或 csv。

Answer 1

querySelectorAll如果您使用父 div 包装每个 orderId 和 name 元素，并且您是父 div，则看起来会更清晰。我认为不可能将键和值同时作为 JSON 格式的变量。这是我要做的（假设您的 orderId 和名称的长度相同）：

const orderIds = document.querySelectorAll(".orderid")

const names = document.querySelectorAll(".name")

let records = []

for(let i=0; i < orderIds.length; i++){

  const record = {

     orderId: orderIds[i].textContent,

     name: names[i].textContent

  }

  records.push(record)

}

然后您发送records到后端并从中提取数据。

Answer 2

我希望这能帮到您：

let results = {orders:{},names:{}}

let ordersElements = document.querySelectorAll(".orderId");

let namesElements = document.querySelectorAll(".name")

ordersElements.forEach((element,idx) => results["orders"][idx] = element.innerHTML)

namesElements.forEach((element,idx) => results["names"][idx] = element.innerHTML)

console.log(results)

<div class="orderId">1</div>

<div class="orderId">2</div>

<div class="orderId">3</div>

<div class="orderId">4</div>

<div class="orderId">5</div>

<div class="name">first</div>

<div class="name">second</div>

<div class="name">third</div>

<div class="name">fourth</div>

<div class="name">last</div>