JavaScript extracts JSON information and outputs it as html

background

I recently bought a question bank from * mobi , but I couldn’t directly extract the question bank, so I analyzed the API of the website and found that there is an interface that returns the corresponding question bank. Here we list a question for analysis.

The knowledge points used here are:

  • JavaScript parses/extracts json
  • JavaScript performs map mapping traversal operations on arrays
  • javascript output html

The website API JSON is as follows:

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": ""
}

solution

Ideas:

  • Use javascript's native support for JSON to directly extract objects and arrays.
  • For arrays, it is convenient to use map for mapping.
  • Encapsulates mapStringArray. For String arrays, it can be traversed directly and stored in the table.
  • Encapsulates mapObjectArray. For the Object array, it must be traversed after traversal, and the Object content is stored in the list, and then displayed in the table. The output format is designed as follows:
<table border="1">
  <tr>
    <th>问题</th>
    <th>选项</th>
  </tr>
  <tr>
    <td>11111</td>
    <td>22222</td>
  </tr>
</table>

The detailed javascript is as follows:

//*************************** */
//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>');

The output HTML is

<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>

The DEMO effect is
insert image description here

Guess you like

Origin blog.csdn.net/moshowgame/article/details/128179888