尝试访问 Api 数组中的对象并计算长度

Question

试图访问神话对象并打印帐户中存在的神话的长度，但不确定如何访问它，因为它嵌套在数组中。 Api 输出低于 Javascript。只是不确定我可以用什么来获得它的长度，因为我使用了 json.mythic.length 并且没有用。非常感谢任何能够帮助我解决这个问题的人。

function MyFunction(e) {

      e.preventDefault();
      var username = document.getElementById("username").value
      document.getElementById("search").innerHTML = username;
      
      

const data = {
    username, limit: 3000, offset: 0, rarities: [], markers: [], onSale: "", search: "" }
      
fetch("https://prod-eternal-backend.onrender.com/api/v1/moment/list" ,{
     
   
    method: "POST",
     
    
    body: JSON.stringify(data),
     
    headers: {
        "Content-type": "application/json; charset=UTF-8"
    }

})

 

.then(response => {
    return response.json();
})
 

.then(json => {

    

    console.log(json);
    document.getElementById("moments").innerHTML ="Total Moments = " +  json.moments.length;
    var mythics = json.mythic.length * 50;
    document.getElementById("gamer").innerHTML ="Gamer Score = " +  mythics;
    
})
}

{
    "moments": [
        {
            "id": 114375,
            "playId": 536,
            "setId": 16,
            "serialNumber": 4,
            "username": "pattonh84",
            "userId": 1230,
            "userAuthId": "AqXfuefDt5a5wfqAoIa45O1RKbd2",
            "influencer": "YuggieTV",
            "influencerId": "YuggieTV",
            "influencerAvatar": "https://eternal-zelos.s3.us-west-2.amazonaws.com/influencers/YuggieTV_square.png",
            "playbackId": "QXMRHp9R4uFcSsCQkN7mBCDbSmFZdImdjeUHypEutRw",
            "rarity": "mythic",
            "createdAt": "2021-10-25T00:11:54.734962Z",
            "setName": "Flow State",
            "circulationCount": 30,
            "title": "How Strong Could It Be?",
            "imageURL": "https://eternal-zelos.s3.us-west-2.amazonaws.com/images/FlowFest/Let+Me+See+How+Strong+It+Is.png",
            "packName": "Flow State",
            "clipDate": "2021-09-26T02:55:28Z",
            "tags": [
                "funny"
            ],
            "description": "Yuggie doing experiments in the name of science. Today's experiment is about how strong a watermelon could be.",
            "game": "IRL",
            "twitter": "yuggietv",
            "staked": false,
            "autographStatus": "false",
            "discordUtility": false,
            "markers": null
        },
        {
            "id": 108262,
            "playId": 565,
            "setId": 16,
            "serialNumber": 1,
            "username": "pattonh84",
            "userId": 1230,
            "userAuthId": "AqXfuefDt5a5wfqAoIa45O1RKbd2",
            "influencer": "Amouranth",
            "influencerId": "Amouranth",
            "influencerAvatar": "https://eternal-zelos.s3.us-west-2.amazonaws.com/influencers/Amouranth.jpg",
            "playbackId": "101L8XUOTCKkJW3USj6rtiJm5k4iTAwTIMqcxfPsr8QA",
            "rarity": "mythic",
            "createdAt": "2021-10-22T17:07:38.357172Z",
            "setName": "Flow State",
            "circulationCount": 30,
            "title": "Mare Awareness",
            "imageURL": "https://eternal-zelos.s3.us-west-2.amazonaws.com/images/FlowFest/amouranth+pretending+to+be+a+horse.png",
            "packName": "Flow State",
            "clipDate": "2021-09-26T04:21:46Z",
            "tags": [
                "funny"
            ],
            "description": "Now a popular gif, this clip showcases a horse performance complete with galloping and internal monalogue.",
            "game": "Just Chatting",
            "twitter": "Amouranth",
            "staked": false,
            "autographStatus": "pending",
            "autographRequestId": 2071,
            "discordUtility": false,
            "markers": null
        },
        {
            "id": 114393,
            "playId": 536,
            "setId": 16,
            "serialNumber": 22,
            "username": "pattonh84",
            "userId": 1230,
            "userAuthId": "AqXfuefDt5a5wfqAoIa45O1RKbd2",
            "influencer": "YuggieTV",
            "influencerId": "YuggieTV",
            "influencerAvatar": "https://eternal-zelos.s3.us-west-2.amazonaws.com/influencers/YuggieTV_square.png",
            "playbackId": "QXMRHp9R4uFcSsCQkN7mBCDbSmFZdImdjeUHypEutRw",
            "rarity": "mythic",
            "createdAt": "2021-10-22T03:35:24.934307Z",
            "setName": "Flow State",
            "forSale": true,
            "circulationCount": 30,
            "price": 200,
            "title": "How Strong Could It Be?",
            "imageURL": "https://eternal-zelos.s3.us-west-2.amazonaws.com/images/FlowFest/Let+Me+See+How+Strong+It+Is.png",
            "packName": "Flow State",
            "clipDate": "2021-09-26T02:55:28Z",
            "tags": [
                "funny"
            ],
            "description": "Yuggie doing experiments in the name of science. Today's experiment is about how strong a watermelon could be.",
            "game": "IRL",
            "twitter": "yuggietv",
            "staked": false,
            "autographStatus": "false",
            "discordUtility": false,
            "productId": 67358,
            "markers": null
        }
    ],
    "totalMoments": 3
}

Answer 1

您正在尝试访问 JSON 对象上的 mythic 属性，但您的数据没有这样的属性。我建议您更多地研究 JSON 结构和访问 javascript 中的属性。

基本上，json.mythics 在json 对象的根级别检查名为mythics 的属性，与json.moments 相同。如果您的数据是这样组织的：

{
  "moments": [...],
  "mythics": [...]
}

然后您可以使用json.mythics 访问它

---

但是您的 json 只有一个 moments 对象数组，其中一些对象的 rarity 属性设置为 "mythic"。

假设您想从数组中过滤掉这些元素，一个简单的filter 就足够了：

const mythics = json.moments.filter(moment => moment.rarity === 'mythic');
mythics.length // gives the length of the 'mythics'