JavaScript は JSON 情報を抽出し、html として出力します

バックグラウンド

最近* mobiで問題バンクを購入したのですが、問題バンクを直接抽出できなかったため、WebサイトのAPIを解析したところ、対応する問題バンクを返すインターフェースがあることがわかりました。 .

ここで使用されるナレッジ ポイントは次のとおりです。

  • JavaScript は json を解析/抽出します
  • JavaScript は、配列に対してマップ マッピング トラバーサル操作を実行します。
  • javascript出力html

Web サイト API の JSON は次のとおりです。

const jsonData = {
    
    
    "status": {
    
    
        "qa_info": {
    
    
            "correct_num": 0,
            "correct_info": [
            ],
            "as": [
            ],
            "score": 0,
            "is_manual_finished": true,
            "aslog": [
            ],
            "qs": [
                {
    
    
                    "is_pb": 0,
                    "bankpk": 7366237,
                    "qtype": "choice",
                    "kind_id": "***************",
                    "question": "You want to find out when users were added to Cloud Spanner Identity Access Management (IAM) roles on your Google Cloud Platform (GCP) project. What should you do in the GCP Console?",
                    "score": 0.2,
                    "question_type": "单选题",
                    "pk": 17962308,
                    "analyze": [],
                    "media": [
                        {
    
    
                            "type": "image",
                            "image_url": ""
                        },
                        {
    
    
                            "audio_time": 0,
                            "audio_url": "",
                            "type": "audio"
                        },
                        {
    
    
                            "type": "video",
                            "video_cover_url": "",
                            "video_time": 0,
                            "video_url": ""
                        }
                    ],
                    "is_collection": 0,
                    "decr_score_per_time": 0,
                    "display_analysis": 0,
                    "ctype": 1,
                    "is_judge": false,
                    "part_score": 0.0,
                    "media_config": {
    
    
                        "is_allow_stop": 1,
                        "is_allow_drag": 1,
                        "video_num": 0,
                        "audio_num": 0
                    },
                    "desc": "",
                    "level": 1,
                    "items": [
                        "Open the Cloud Spanner console to review configurations.",
                        "Open the IAM & admin console to review IAM policies for Cloud Spanner roles.",
                        "Go to the Stackdriver Monitoring console and review information for Cloud Spanner.",
                        "Go to the Stackdriver Logging console, review admin activity logs, and filter them for Cloud Spanner IAM roles."
                    ],
                    "bank_id": "***************",
                    "is_multi": false,
                    "time": "",
                    "full_score_min_time": 0
                }
            ]
        },
        "has_subscribe": true,
        "pc_userinfo": {
    
    
            "uid": "******",
            "nickname": "zhengkai.blog.csdn.net",
            "numid": 1,
            "avatar": "",
            "expire_time": "2029-10-01T23:59:59.999Z",
            "is_answer_vip": 0,
            "name": "Moshow郑锴"
        }
    },
    "message": "",
    "data": {
    
    },
    "description": ""
}

解決

アイデア:

  • JSON に対する JavaScript のネイティブ サポートを使用して、オブジェクトと配列を直接抽出します。
  • 配列の場合、マッピングには map を使用すると便利です。
  • MapStringArray をカプセル化します。文字列配列の場合は、直接走査してテーブルに格納できます。
  • オブジェクト配列の場合、走査後に走査する必要があり、オブジェクトのコンテンツはリストに格納され、テーブルに表示されます。出力形式は次のように設計されています。
<table border="1">
  <tr>
    <th>问题</th>
    <th>选项</th>
  </tr>
  <tr>
    <td>11111</td>
    <td>22222</td>
  </tr>
</table>

詳細な JavaScript は次のとおりです。

//*************************** */
//JavaScript提取JSON信息并输出为html
//*************************** */
//运行 node .\extract_test.js

//数据的分批写入
let fs = require('fs');
let path = require('path');
//1.拼接读取的路径
let str = path.join(__dirname, "data_test.html");
const writeStream = fs.createWriteStream(str, {
    
    
    encoding: 'utf8',
    highWaterMark: 1,
});

const jsonData = {
    
    
    "status": {
    
    
        "qa_info": {
    
    
            "correct_num": 0,
            "correct_info": [
            ],
            "as": [
            ],
            "score": 0,
            "is_manual_finished": true,
            "aslog": [
            ],
            "qs": [
                {
    
    
                    "is_pb": 0,
                    "bankpk": 7366237,
                    "qtype": "choice",
                    "kind_id": "Ynauv6mGwwRR8EzvYoZNjn",
                    "question": "You want to find out when users were added to Cloud Spanner Identity Access Management (IAM) roles on your Google Cloud Platform (GCP) project. What should you do in the GCP Console?",
                    "score": 0.2,
                    "question_type": "单选题",
                    "pk": 17962308,
                    "analyze": [],
                    "media": [
                        {
    
    
                            "type": "image",
                            "image_url": ""
                        },
                        {
    
    
                            "audio_time": 0,
                            "audio_url": "",
                            "type": "audio"
                        },
                        {
    
    
                            "type": "video",
                            "video_cover_url": "",
                            "video_time": 0,
                            "video_url": ""
                        }
                    ],
                    "is_collection": 0,
                    "decr_score_per_time": 0,
                    "display_analysis": 0,
                    "ctype": 1,
                    "is_judge": false,
                    "part_score": 0.0,
                    "media_config": {
    
    
                        "is_allow_stop": 1,
                        "is_allow_drag": 1,
                        "video_num": 0,
                        "audio_num": 0
                    },
                    "desc": "",
                    "level": 1,
                    "items": [
                        "Open the Cloud Spanner console to review configurations.",
                        "Open the IAM &amp; admin console to review IAM policies for Cloud Spanner roles.",
                        "Go to the Stackdriver Monitoring console and review information for Cloud Spanner.",
                        "Go to the Stackdriver Logging console, review admin activity logs, and filter them for Cloud Spanner IAM roles."
                    ],
                    "bank_id": "ymRDcc6sJb7WVzoajVtLhD",
                    "is_multi": false,
                    "time": "",
                    "full_score_min_time": 0
                }
            ]
        },
        "has_subscribe": true,
        "pc_userinfo": {
    
    
            "uid": "******",
            "nickname": "zhengkai.blog.csdn.net",
            "numid": 1,
            "avatar": "",
            "expire_time": "2029-10-01T23:59:59.999Z",
            "is_answer_vip": 0,
            "name": "Moshow郑锴"
        }
    },
    "message": "",
    "data": {
    
    },
    "description": ""
}

function mapStringArray(it){
    
    
    if(it!=undefined){
    
    
        let str="<ul>"
        it.map(x=>{
    
    
            str+=('<li>'+x+'</li>')
        });
        str+="</ul>"
        return str;
    }
    return JSON.stringify(it);
}
function mapObjectArray(it){
    
    
    if(it!=undefined){
    
    
        let str="<ul>"
        it.map(x=>{
    
    
            str+=('<li>'+x.content+'</li>')
        });
        str+="</ul>"
        return str;
    }
    return JSON.stringify(it);
}
const dataList = jsonData.status.qa_info.qs;
// console.log(dataList)
writeStream.write('<table border="1"><tr><th>问题</th><th>选项</th></tr>');
dataList.map(m=>{
    
    

    writeStream.write("<tr><td>"+m.question_type+"<br>"+m.question+"</td><td>"+mapStringArray(m.items)+"</td></tr>")

}
);
writeStream.write('</table></body></html>');

出力HTMLは

<table border="1"><tr><th>问题</th><th>选项</th></tr><tr><td>单选题<br>You want to find out when users were added to Cloud Spanner Identity Access Management (IAM) roles on your Google Cloud Platform (GCP) project. What should you do in the GCP Console?</td><td><ul><li>Open the Cloud Spanner console to review configurations.</li><li>Open the IAM &amp; admin console to review IAM policies for Cloud Spanner roles.</li><li>Go to the Stackdriver Monitoring console and review information for Cloud Spanner.</li><li>Go to the Stackdriver Logging console, review admin activity logs, and filter them for Cloud Spanner IAM roles.</li></ul></td></tr></table></body></html>

デモ効果は
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/moshowgame/article/details/128179888