JSON 属性返回未定义

Question

所以我正在创建商店目录作为个人项目。我有两个基本过滤器（类别和子类别）。当我决定要使用一些 JSON 时，我刚刚返回所有内容服务器端。所以我用了 json_encode(array());发送回 json 数据。

当我控制日志时，一切看起来都很好。片段：

{
    "product": [
        {
            "productID": "1",
            "name": "Black Socks",
            "description": "Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse.",
            "price": "6.99",
            "stock": "25",
            "image": "placeholder.png",
            "category_id": "1",
            "subcategory_id": "1"
        }
}

但是当我尝试访问属性时，说 name，它 returns 未定义。

 function displayAll() {
  var category = document.getElementById('category');
  var option = category.options[category.selectedIndex].value;
  var catalogDiv = document.getElementById('catalog');
  var allItems;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function (category) {
    if (this.readyState == 4 && this.status == 200) {
      catalog = JSON.parse(this.responseText);
      catalog = JSON.stringify(catalog, null, 4);

      console.log(catalog.name);  //<- Returns undefined

      catalogDiv.innerHTML = 'Success';
    }
  }; //End anon function

  //request_type, URL, boolean (is asynchronous)
  xhttp.open('POST', '../content/no_filter.php', true);

  //Correct header content
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  //Sends post data
  xhttp.send('option=' + option);

} //End display all

这是我的源代码 link：https://github.com/WordWizard/store-catalog

Answer 1

if (this.readyState == 4 && this.status == 200) {
  catalog = JSON.parse(this.responseText);
  // catalog = JSON.stringify(catalog, null, 4); // remove these line

  console.log(catalog.name);  //<- Returns undefined

  catalogDiv.innerHTML = 'Success';
}

在您将 JSON 对象转换为字符串的行中。所以你不能从这个字符串中得到名字。

如果删除此行，将正常工作。

{
   "product": [
        {
           "productID": "1",
           "name": "Black Socks",
           "description": "Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse.",
           "price": "6.99",
           "stock": "25",
           "image": "placeholder.png",
           "category_id": "1",
           "subcategory_id": "1"
        }
    ] // close your array properly.
}

Answer 2

像这样更改您的代码：

function displayAll() {
  var category = document.getElementById('category');
  var option = category.options[category.selectedIndex].value;
  var catalogDiv = document.getElementById('catalog');
  var allItems;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function (category) {
    if (this.readyState == 4 && this.status == 200) {
      catalog = JSON.parse(JSON.stringify(catalog,null,4));
      console.log(catalog)
      console.log(catalog.paroduct[0].name);  

      catalogDiv.innerHTML = 'Success';
    }
  }; //End anon function

  //request_type, URL, boolean (is asynchronous)
  xhttp.open('POST', '../content/no_filter.php', true);

  //Correct header content
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  //Sends post data
  xhttp.send('option=' + option);

} //End display all

Answer 3

我从未使用过 stringify() 函数，但我已阅读文档，它说它将 JSON 对象转换为字符串。您正在尝试访问一个字符串属性，所以它 returns 未定义。

尝试评论或删除以下行：

catalog = JSON.stringify(catalog, null, 4);

您想要的是 JSON 对象，而不是字符串 ;)

JSON 属性返回未定义

JSON property returning undefined

javascript

php

json

stringify

JSON 属性 返回未定义

JSON property returning undefined

javascript

php

json

stringify

JSON 属性返回未定义