vue.js 如何通过id/value对同一数组中的jsonObjects进行计数？

dsekswqp 于 2023-11-21 发布在 Vue.js

关注(0)|答案(2)|浏览(130)

我有一个jsonArray，其中包含两个带有对象的嵌入式数组。我试图根据团队“value”来计算“duty”parentId，因为存在一对一的匹配。例如：团队A值500将有会议和午餐职责，团队B将有考勤卡，停车场和早餐职责。

{
"jsonArray":[
  {
     "teams":[
     
        {
           "text":"Team A",
           "id":1,
           "value":500,
           "parentId":333
        },
        {
           "text":"Team B",
           "id":2,
           "value":600,
           "parentId":444
        }
        
     ],
     "duty":[
     
        {
           "text":"Meetings",
           "id":11,
           "value":100,
           "parentId":500
        },
        {
           "text":"Lunch",
           "id":12,
           "value":101,
           "parentId":500
        },
        {
           "text":"Time Cards",
           "id":13,
           "value":102,
           "parentId":600
        },
        
        {
           "text":"Parking",
           "id":14,
           "value":103,
           "parentId":600
        
        },
         {
           "text":"Breakfast",
           "id":15,
           "value":104,
           "parentId":600
        }
     ]
  
  }
 ]
}

字符串
我使用Vue（Axios）正确地返回了上面的json。下面是我的方法。
我可以使用reduce来计数，但这只是数组（teams）中的第一个对象，没有链接到（duty）。有没有一种方法可以通过value和parentId来计数，因为它们在同一个数组中. jsonArray.teams.value == jsonArray.duty.parentId？

newJsonData() {
  var dutyCount = this.jsonArray.flatMap((item) => item.teams);

  let countValuesByKey = (arr, key) =>
    arr.reduce((r, c) => {
      r[c[key]] = (r[c[key]] || 0) + 1;
      return r;
    }, {});

  //returns numbers only 
  let countValue = (arr, key, value) =>
    arr.filter((x) => x[key] === value).length;

  console.debug("dutyCount", countValuesByKey(dutyCount, "text"));

  return dutyCount;
},

型
预期结果：

{
  "Team A": 2,
  "Team B": 3
}

型

vue.js

来源：https://stackoverflow.com/questions/77445194/how-to-count-jsonobjects-in-same-array-by-id-value

2条答案

按热度按时间

um6iljoc1#

一个Array.reduce与适当的索引到两个数组将解决您的问题。
下面添加了一个工作示例

const response = {
  jsonArray: [
    {
      teams: [
        { text: "Team A", id: 1, value: 500, parentId: 333 },
        { text: "Team B", id: 2, value: 600, parentId: 444 },
      ],
      duty: [
        { text: "Meetings", id: 11, value: 100, parentId: 500 },
        { text: "Lunch", id: 12, value: 101, parentId: 500 },
        { text: "Time Cards", id: 13, value: 102, parentId: 600 },
        { text: "Parking", id: 14, value: 103, parentId: 600 },
        { text: "Breakfast", id: 15, value: 104, parentId: 600 },
      ],
    },
  ],
};
const result = response.jsonArray[0].duty.reduce((acc, curr) => {
  const teamName = response.jsonArray[0].teams.find(
    (team) => team.value === curr.parentId
  );
  if (teamName && teamName.text) {
    acc[teamName.text] = acc[teamName.text] ? ++acc[teamName.text] : 1;
  }
  return acc;
}, {});
console.log(result);

字符串

赞(0）回复(0）举报 2023-11-21

ilmyapht2#

您的尝试并不遥远-虽然有几种方法可以做到这一点，但最简单的方法（IMO）是坚持使用reduce()。
在下面的函数中，我使用了两次：第一次构建团队ID到文本名称的对象Map，然后在duty数组上使用第二个reduce()调用来计算该团队ID的示例：

const jsonResponse = {
  "jsonArray": [{
    "teams": [

      {
        "text": "Team A",
        "id": 1,
        "value": 500,
        "parentId": 333
      },
      {
        "text": "Team B",
        "id": 2,
        "value": 600,
        "parentId": 444
      }

    ],
    "duty": [

      {
        "text": "Meetings",
        "id": 11,
        "value": 100,
        "parentId": 500
      },
      {
        "text": "Lunch",
        "id": 12,
        "value": 101,
        "parentId": 500
      },
      {
        "text": "Time Cards",
        "id": 13,
        "value": 102,
        "parentId": 600
      },

      {
        "text": "Parking",
        "id": 14,
        "value": 103,
        "parentId": 600

      },
      {
        "text": "Breakfast",
        "id": 15,
        "value": 104,
        "parentId": 600
      }
    ]

  }]
};

function processJsonResponse(jsonResponse) {
  return jsonResponse['jsonArray'].map(cv => {
    var teams = cv['teams'].reduce((acc, team) => {
      acc[team['value']] = team['text'];
      return acc;
    }, {});
    return cv['duty'].reduce((acc, duty) => {
      acc[teams[duty['parentId']]] = acc[teams[duty['parentId']]] ? acc[teams[duty['parentId']]] + 1 : 1;
      return acc;
    }, {});
  });
};

console.log(processJsonResponse(jsonResponse));

字符串
这段代码也是为了支持将来的jsonResponse['jsonArray'].length > 1示例而构建的，在jsonResponse['jsonArray']上使用map()-但是，要想 * 完全 * 匹配您在帖子中指定的预期输出，您需要做的就是将[0]添加到您对processJsonResponse()的调用中，即processJsonResponse(jsonResponse)[0]。

赞(0）回复(0）举报 2023-11-21

我来回答

vue.js 如何通过id/value对同一数组中的jsonObjects进行计数？

2条答案

相关问题

热门标签

最新问答