Question

我建立了django REST框架API，它通过随机数据连接到django模型。按下按钮后，我可以将JSON格式的API数据加载到HTML Box中。我称它为 JSON数据查找器

<div class="container-fluid">

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('getJSONdataTest').onclick = function () {
            req = new XMLHttpRequest();
            req.open("GET", 'http://127.0.0.1:8000/cars/', true);
            req.send();
            req.onload = function () {
                json = JSON.parse(req.responseText);
                document.getElementsByClassName('data box')[0].innerHTML = JSON.stringify(json);
                console.log(json);
                // Print
            };
        };
    });
</script>
<style>

    body {
        text-align: center;
        font-family: "Helvetica", sans-serif;
    }

    h1 {
        font-size: 2em;
        font-weight: bold;
    }

    .box {
        border-radius: 5px;
        background-color: #eee;
        padding: 20px 5px;
    }

    button {
        color: white;
        background-color: #4791d0;
        border-radius: 5px;
        border: 1px solid #4791d0;
        padding: 5px 10px 8px 10px;
    }

        button:hover {
            background-color: #0F5897;
            border: 1px solid #0F5897;
        }
</style>
<h1>JSON Data Finder</h1>
<p class="data box">
    The Data will go here
</p>
<p>
    <button id="getJSONdataTest">
        Get Data
    </button>
</p>

这是我单击按钮时 JSON数据查找器中的输出：

{“ count”：4，“ next”：null，“ previous”：null，“ results”：[{“ id”：3，“ name”：“ Audi”，“ price”：11}，{ “ id”：2，“ name”：“ Mercedes”，“ price”：22}，{“ id”：1，“ name”：“ BMW”，“ price”：99}，{“ id”：4， “ name”：“ Trabant”，“ price”：113}]}

---------------------------

现在，我想在按下按钮后定位特定对象或键值。

示例：

console.log(json[2].name);

所以输出应显示对象3的名称

奥迪

---------------------------

不幸的是，什么都没有发生，并且控制台显示了一个错误

未捕获的TypeError：无法读取未定义的属性“名称” 在XMLHttpRequest.req.onload（（index）：111）

我猜想JavaScript无法解释我的输出，因为数组不是“干净的”？因此

{“ count”：4，“ next”：null，“ previous”：null，

在我的成绩前？

“结果”：[{“ id”：3，“名称”：“奥迪”，“价格”：11}，{“ id”：2，“名称”：“奔驰”，“价格”：22 }，{“ id”：1，“ name”：“ BMW”，“ price”：99}，{“ id”：4，“ name”：“ Trabant”，“ price”：113}]}

Answer 1

由于数组不是“干净的”，javaScript无法解释我的输出

您的json对象不是不干净的数组；它根本不是数组。这是一个JS对象（mdn）。

一旦您阅读了JS对象，该错误就会变得很明显。但总而言之，json既不是数组，也没有名为2的字段。因此json[2]返回未定义，并且undefined.name引发错误。

要获取Audi，您需要json.results[0].name

console.log /从阵列中选择单个键？

1 个答案: