如何从 api 而不是控制台将 Json 解析为 HTML答案

【问题标题】：How to parse Json to HTML from api rather than console如何从 api 而不是控制台将 Json 解析为 HTML
【发布时间】：2021-05-30 12:08:32
【问题描述】：

我正在尝试获取此 API 返回的结果并将其打印到一个简单的 HTML 元素中，以便用户可以阅读。目前它设置为将所有值返回到控制台日志。到目前为止，我已经尝试在 HTML 中创建一个 div 元素并在那里打印数据，我也尝试过使用 innerHTML 但我也没有成功使用该方法。

 <body>
<form id="form1" runat="server">
    <div>
        <br />
        <input id="myfiles" type="file" multiple="multiple" />
        <button type="button">OK</button>

        <button id="MyButton" type="button" onclick="sendIdentification()">OK</button>
    </div>

    <div id="displayresult"> 
        <p>Result here</p>
        
    </div>
</form>

<script type="text/javascript">function sendIdentification() {
        alert('start');
        const files = [...document.querySelector('input[type=file]').files];


        const promises = files.map((file) => {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = (event) => {
                    const res = event.target.result;
                    console.log(res);
                    resolve(res);
                }
                reader.readAsDataURL(file)
            })
        })

        Promise.all(promises).then((base64files) => {
            console.log(base64files)

            const data = {
                api_key: "Die8ewFGvpw5JrRTuOEjgGR10uLjMwirF3jYaalmRjk4dzP8Gm",
                images: base64files,
                modifiers: ["crops_fast", "similar_images"],
                plant_language: "en",
                plant_details: ["common_names",
                    "url",
                    "name_authority",
                    "wiki_description",
                    "taxonomy",
                    "synonyms"]
            };

            fetch('https://api.plant.id/v2/identify', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            })

                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
        })
/* attempt to try parsing to an html element in addition to the console log. Currently throws an error.
document.querySelector('#displayresult').innerHTML = jsonData[1].common_names);
for (var i = 0; i < jsonData.length; i++) {
    document.querySelectorAll('.displayresult')[i].innerHTML = jsonData[i].common_names;
    */
}

                
    };</script>

【问题讨论】：

标签： javascript html arrays json parsing

【解决方案1】：

您编写的代码尝试在 promise 解决之前将数据添加到 div。相反，您应该编写相同的代码，但在 then 部分中像这样。

 fetch('https://api.plant.id/v2/identify', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            })

                .then(response => response.json())
                .then(jsonData => {
                    console.log('Success:', jsonData);
                    document.querySelector('#displayresult').innerHTML = jsonData[1].common_names;
                    for (var i = 0; i < jsonData.length; i++) {
                        document.querySelectorAll('.displayresult')[i].innerHTML = jsonData[i].common_names;
                    }
                })
                .catch((error) => {
                    console.error('Error:', error);
                });

【讨论】：

您好，感谢您的回复，我试过了，但是我收到了“错误：TypeError：无法读取 PlantAi:192 未定义的属性 'common_names'”。我将“jsonData”更改为“data”，因为这似乎是 api 的构建方式，而 Jsondata 抛出了不同的错误。另外值得注意的是控制台确实说“成功”，所以它会进入控制台。
不是从api返回的json是传递给第二个then的参数
第一个错误很可能是因为 jsonData 不是数组所以你能提供控制台数据的格式吗！
初始控制台显示 {id: 10304382, custom_id: null, meta_data: {…}, upload_datetime: 1614556267.301842, finished_datetime: 1614556268.300537, …}
建议：数组（5）0：{id：76752408，植物名称：“Rosa”，植物详细信息：{…}，概率：0.6802025919692216，确认：假，…} 1：{id：76752409，植物名称：“Rosa chinensis”，植物详细信息：{…}，概率：0.1527320943113081，确认：错误，…} 2：{id：76752410，植物名称：“Rosa rugosa”，植物详细信息：{…}，概率：0.02929257583542776，确认：错误，...} 3：{id：76752411，植物名称：“Impatiens walleriana”，植物详细信息：{...}，概率：0.014303056370904305，确认：错误，...} 长度：4