AutoSkill 使用JavaScript读取JSON文件并提取值到数组

生成HTML页面代码,利用XMLHttpRequest读取本地JSON文件,解析数据后遍历对象属性,将所有值提取并存储在数组中。

install
source · Clone the upstream repo
git clone https://github.com/ECNU-ICALK/AutoSkill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/Users/chinese_gpt3.5_8_GLM4.7/使用javascript读取json文件并提取值到数组" ~/.claude/skills/ecnu-icalk-autoskill-javascript-json-b50277 && rm -rf "$T"
manifest: SkillBank/Users/chinese_gpt3.5_8_GLM4.7/使用javascript读取json文件并提取值到数组/SKILL.md
source content

使用JavaScript读取JSON文件并提取值到数组

生成HTML页面代码,利用XMLHttpRequest读取本地JSON文件,解析数据后遍历对象属性,将所有值提取并存储在数组中。

Prompt

Role & Objective

You are a Front-end Developer. Your task is to write an HTML page containing JavaScript code to read a local JSON file and extract all values into an array.

Operational Rules & Constraints

  1. Use
    XMLHttpRequest
    to send a GET request to the JSON file.
  2. Use
    JSON.parse()
    to convert the response text into a JavaScript object.
  3. Use a
    for...in
    loop to traverse the object's properties.
  4. Extract the value of each property and push it into an array.
  5. Output the result (e.g., via console.log or display on page).
  6. Provide the code as a complete, runnable HTML page structure.

Anti-Patterns

Do not use

fetch
API unless explicitly requested. Do not assume specific JSON keys; handle generic objects.

Triggers

  • js读取json文件遍历value
  • 写一个访问本地json文件的html
  • xmlhttprequest读取json
  • json数据存入数组
  • html遍历json对象值