访问 JSON 对象数组的 JSON 元素答案

【问题标题】：Accessing JSON elements of an array of JSON objects访问 JSON 对象数组的 JSON 元素
【发布时间】：2019-09-30 00:45:45
【问题描述】：

我正在从前端返回一个 JSON 项目列表。它目前看起来像：

[
  "[{ "_id" : ObjectId("5cbcd80e0c5c9f1dfc8bf2f3"), "price" : "$1,
  399.00", "name" : "AlienwareGamingPCDesktopAuroraR7-8thGenIntelCorei7-8700,
  16GBDDR4Memory,
  2TBHardDrive+32GBIntelOptane,
  ?NVIDIAGeForceGTX10808GBGDDR5X,
  Windows1064bit\", "url" : "https: //www.amazon.com/gp/product/B076BHG74V/ref=s9_acsd_zwish_hd_bw_b2N0U_>c_x_w?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=merchandised-search-11&pf_rd_r=TW0CMS0QN07XT2BM838T&pf_rd_t=101&pf_rd_p=62f4ca32-9706-51c1-a1d1-9f7214564c34&pf_rd_i=565098\", "description" : "ThenewAlienwareAuroraisamid-towerdesktopwithaMicroATXmotherboardandisalsooursmallestdual-graphicscapabledesktopandhasmoretool-lessfeaturesthananypreviousAlienwaredesktopsuchas: tool-lessgraphics,
  expansioncards,
  hard>drives,
  andmemory.", "keywords" : ["computer"] }]"
]

当使用：console.log(results[0]) 显示结果时，它会显示整个对象。在执行 console.log(results[0].name) 或 console.log(results[0].name) 时，我得到一个未定义的错误。列表中当前只有一个对象，但对于将来的查询，将会有更多。关于如何访问单个元素的任何想法？

前端的代码是什么样子的：

.then(response => {
            this.amazonItems = response.data;
            console.log(this.amazonItems[0]);

查询MongoDB：

var result = collection.Find(filter).Sort(sort).ToList().ToJson();

序列化：

List<string> returnResult = new List<string>();
returnResult.Add(_sm.SearchAmazonQuery(searchQuery, _db));
response.Content = new StringContent(JsonConvert.SerializeObject(returnResult), System.Text.Encoding.UTF8, "application/json");
response.StatusCode = HttpStatusCode.OK;
return response;

控制台输出： console

【问题讨论】：

太多JSON。
请显示您的控制台的屏幕截图，将其输出复制为文本并不总是清晰的。另外，您是如何创建请求的？
从您下面的评论中，returnResult 是什么？我怀疑它是一个列表/数组/集合/任何已经 JSON 编码的字符串，这就是你得到这个双编码响应的原因
@Phil 我添加了一个答案....提供了更多信息。

标签： javascript vue.js

【解决方案1】：

尝试解析，我认为是字符串化模式。

.then(response => {
    this.amazonItems = response.data;
    console.log(JSON.parse(this.amazonItems[0]));

【讨论】：

仅供参考，它是JSON.parse（小写“p”）。另外，我怀疑 OP 的响应是双 JSON 编码的，否则 amazonItems[0] 将不起作用
我忘了添加，我将后端的列表序列化为 JSON，所以解析不起作用。 response.Content = new StringContent(JsonConvert.SerializeObject(returnResult), System.Text.Encoding.UTF8, "application/json");

【解决方案2】：

好像是字符串化的，试试 JSON.parse(results[0])，也是语法有点怪 ObjectId(‘asdajdjsja’)

【讨论】：

ObjectId 表示响应是一个 MongoDB 文档条目
正确，它来自 Mongo。

【解决方案3】：

我不太了解您的服务器端代码（猜测是 C#）但是，假设

_sm.SearchAmazonQuery(searchQuery, _db)

返回结果

var result = collection.Find(filter).Sort(sort).ToList().ToJson();

这似乎已经是一个 JSON 字符串，我怀疑你只是想要

response.Content = new StringContent(_sm.SearchAmazonQuery(searchQuery, _db), 
        System.Text.Encoding.UTF8, "application/json");

这意味着您的 response.data 将是一个对象数组，而不是 JSON 字符串数组。

.then(response => {
  this.amazonItems = response.data
  console.log(this.amazonItems[0])
    // ? {_id: "5cbcd80e0c5c9f1dfc8bf2f3", price: "$1,399.00", ...
})

【讨论】：

您的假设是正确的。我尝试了您的修复，console.log(amazonItems) 的结果现在与图像的结果相同。执行 console.log(amazonItems[0] 会导致单个 ' [ ' 并且 amazonItems.name 会导致未定义。
这很奇怪，因为 Axios 应该自动将响应解码为 JSON
不知道还能做什么。如果我可以访问这些元素就不会那么糟糕了。
我们需要确切地看到响应是什么。使用浏览器的 Network 控制台。检查响应标头，请准确显示响应正文的样子