【未完结】大型 json 对象数据の分析、处理

对 “什么算是大型数据” 没有概念的话，执行下以下代码、请求下单个从者的数据——就会有概念了反正数据量绝对多过你自己的玩具项目：

async function myFetch(url) {
  console.log("fetching...");
  let res = await fetch(url);
  let json_data = await res.json();

  console.log("打印结果中...");
  console.log(Object.keys(json_data));
}

const myUrl = "https://api.atlasacademy.io/nice/NA/servant/2";
myFetch(myUrl);
// 最后的数据对象 prettier 之后有 1000 多行

这么大的数据，是个人都知道：全部照搬到网页上，网页得有 “多卡” ！所以，接收后如何预处理大型数据 的思路就很重要了。

（这里先记录下我的第一次思路：）

1. 首先，列出你想要的属性！（这步不清晰的话，就像画画没有草稿，接下来的步骤无从展开）

   我想要展示的 “从者最基本的属性” ，包括：

   • 立绘图片 - extraAssets.charaGraph
   • 从者名 - name
   • 宝具名 - noblePhantasms.name/.originalName
   • class（职介）- className
   • 技能 - skills

2. 然后，我们已经持有 json_data 的结果，就 ctrl + F 查询属性，对属性的名称、大概数据格式留个印象（结果见上）。

   某些属性需要 单独打印出来查看 ，才能看清更深层的内容。

   例如，包含 从者立绘等图片信息 的属性，在一级打印结果中通常只显示一个对象或键名，我们必须进一步展开，才能找到图片的 url 等具体字段。

    // 这些 "Object" 等等的就要详细打印
    extraAssets: {
        charaGraph: { ascension: [Object], costume: [Object] },
        faces: { ascension: [Object], costume: [Object] },
        charaGraphEx: {},
        charaGraphName: {},
        narrowFigure: { ascension: [Object], costume: [Object] },
        charaFigure: { ascension: [Object], story: [Object], costume: [Object] },
        charaFigureForm: {},
        charaFigureMulti: {},
        charaFigureMultiCombine: {},
        charaFigureMultiLimitUp: {},
        commands: { ascension: [Object], costume: [Object] },
        status: { ascension: [Object], costume: [Object] },
        equipFace: {},
        image: { story: [Object] },
        spriteModel: { ascension: [Object], costume: [Object] },
        charaGraphChange: {},
        narrowFigureChange: {},
        facesChange: {}
      },
   

   我们异步打印 extraAssets.charaGraph 属性，就得到了：

    {
      ascension: {
        '1': 'https://static.atlasacademy.io/NA/CharaGraph/100100/100100a@1.png',
        '2': 'https://static.atlasacademy.io/NA/CharaGraph/100100/100100a@2.png',
        '3': 'https://static.atlasacademy.io/NA/CharaGraph/100100/100100b@1.png',
        '4': 'https://static.atlasacademy.io/NA/CharaGraph/100100/100100b@2.png'
      },
      costume: {
        '100130': 'https://static.atlasacademy.io/NA/CharaGraph/100130/100130a.png'
      }
    }
   

   1. 你已经懂得了如何获得单个属性的值，那可不可以一口气返回所有想要的属性值呢？