使用 javascript 根据状态和商店计数对象？

Answer 1

var items = [{
    "id": 1,
    "status": "ORANGE",
    "Shop": "ABC",
    "ownerDetails": [{
      "name": "test1",
      "address": "test1"
    }]

  },
  {
    "id": 2,
    "status": "GREEN",
    "Shop": "ABC",
    "ownerDetails": [{
      "name": "test1",
      "address": "test1"
    }]
  },
  {
    "id": 3,
    "status": "ORANGE",
    "Shop": "ABC",
    "ownerDetails": [{
      "name": "test1",
      "address": "test1"
    }]
  },
  {
    "id": 4,
    "status": "YELLOW",
    "Shop": "ABC",
    "ownerDetails": [{
      "name": "test1",
      "address": "test1"
    }]
  },
  {
    "id": 5,
    "status": "RED",
    "Shop": "ABC",
    "ownerDetails": [{
      "name": "test1",
      "address": "test1"
    }]
  },
  {
    "id": 6,
    "status": "GREEN",
    "Shop": "ABC",
    "ownerDetails": [{
      "name": "test1",
      "address": "test1"
    }]
  },
  {
    "id": 7,
    "status": "GREEN",
    "Shop": "XYZ",
    "ownerDetails": [{
      "name": "test2",
      "address": "test2"
    }]
  },
  {
    "id": 8,
    "status": "ORANGE",
    "Shop": "XYZ",
    "ownerDetails": [{
      "name": "test2",
      "address": "test2"
    }]
  },
  {
    "id": 9,
    "status": "YELLOW",
    "Shop": "ABC",
    "ownerDetails": [{
      "name": "test1",
      "address": "test1"
    }]
  },
  {
    "id": 10,
    "status": "GREEN",
    "Shop": "EFG",
    "ownerDetails": [{
      "name": "test3",
      "address": "test3"
    }]
  }
];

var mapData = items.map((data) => {
  var getList = items.filter(word => word.Shop == data.Shop).length;
  return {
    id: data.id,
    status: data.status,
    Shop: data.Shop,
    text: data.ownerDetails,
    Count: getList
  };
});

console.log(mapData);

注意：- 地图数据和类似商店的计数......

Answer 2

未定义对象的解构

/**
 * Problem: The deconstructed object is not defined.
 *
 * This will throw: TypeError: Cannot read properties of undefined (reading 'name')
 * 
 * This is roughly equivalent of doing const { name } = undefined
 */
const [{ name }] = [];

/**
 * Solution: Assign a default value when the deconstructed object is not defined.
 *
 * If the deconstructing object is undefined,
 * assign an empty object as the default value
 */
const [{ name } = {}] = [];

访问未定义对象的属性

如果您在比较 item.ownerDetails[0].name === name 之前没有检查 ownerDetails 数组是否为空，您最终可能会尝试访问不存在的对象的属性。这将导致像上面那样的 TypeError。

要处理这种情况，您必须：

1. 验证item.owner详细信息中至少有一个元素；
2. 验证名称属性是否存在于第一个元素上；

   如果测试通过，则返回 ownerDetails 的第一个元素的 name 属性值。否则，您必须提供默认值。

   工作示例

   const items = [
     { id: 1, status: 'ORANGE', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
     { id: 2, status: 'GREEN', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
     { id: 3, status: 'ORANGE', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
     { id: 4, status: 'YELLOW', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
     { id: 5, status: 'RED', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
     { id: 6, status: 'GREEN', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
     { id: 7, status: 'GREEN', Shop: 'XYZ', ownerDetails: [{ name: 'test2', address: 'test2' }] },
     { id: 8, status: 'ORANGE', Shop: 'XYZ', ownerDetails: [{ name: 'test2', address: 'test2' }] },
     { id: 9, status: 'YELLOW', Shop: 'ABC', ownerDetails: [{ name: 'test1', address: 'test1' }] },
     { id: 10, status: 'GREEN', Shop: 'EFG', ownerDetails: [{ name: 'test3', address: 'test3' }] },
     { id: 11, status: 'GREEN', Shop: 'EFG', ownerDetails: [] }
   ];
   
   const itemsWithCount = items.map(item => ({
     ...item,
     /**
      * If the first element of ownerDetails is not defined,
      * assign an empty object as the default value for the first
      * element of ownerDetails array.
      */
     Count: items.filter(({ status, Shop, ownerDetails: [{ name } = {}] }) =>
       item.status === status &&
       item.Shop === Shop &&
       (
         (
           /**
            * 1. Check if ownerDetails is not empty.
            */
           item.ownerDetails.length &&
           /**
            * 2. Check if the first element of item.ownerDetails has a name property.
            *
            * ESLint best practice:
            * ------------------------------------------------------
            * Disallow calling some Object.prototype methods directly on objects.
            * For more details, see https://eslint.org/docs/rules/no-prototype-builtins
            * ------------------------------------------------------
            */
           Object.prototype.hasOwnProperty.call(item.ownerDetails[0], 'name') &&
           /**
            * 3. Accessing and returning name property.
            */
           item.ownerDetails[0].name
           /**
            * Else, compare undefined with name property.
            */
         ) || undefined
       ) === name
     ).length
   }));
   
   console.log(itemsWithCount)

   输出

   [
     { Count: 2, id: 1, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'ORANGE' },
     { Count: 2, id: 2, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'GREEN' },
     { Count: 2, id: 3, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'ORANGE' },
     { Count: 2, id: 4, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'YELLOW' },
     { Count: 1, id: 5, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'RED' },
     { Count: 2, id: 6, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'GREEN' },
     { Count: 1, id: 7, ownerDetails: [{ address: 'test2', name: 'test2' }], Shop: 'XYZ', status: 'GREEN' },
     { Count: 1, id: 8, ownerDetails: [{ address: 'test2', name: 'test2' }], Shop: 'XYZ', status: 'ORANGE' },
     { Count: 2, id: 9, ownerDetails: [{ address: 'test1', name: 'test1' }], Shop: 'ABC', status: 'YELLOW' },
     { Count: 1, id: 10, ownerDetails: [{ address: 'test3', name: 'test3' }], Shop: 'EFG', status: 'GREEN' },
     { Count: 1, id: 11, ownerDetails: [], Shop: 'EFG', status: 'GREEN' }
   ]
   

Answer 3

您可以使用map 来循环遍历您的数组（顺便说一下，您需要在“Shop”之前添加一些逗号。

  const items = [
  {
    "id": 1,    
    "status": "ORANGE",
    "Shop":"ABC",
    "ownerDetails":[ {"name":"test1","address":"test1"}]    
    
  },
  {
    "id": 2,
    "status": "GREEN",
    "Shop":"ABC",
    "ownerDetails":[ {"name":"test1","address":"test1"}]
  },
  {
    "id": 3,
    "status": "ORANGE",
    "Shop":"ABC",
    "ownerDetails":[ {"name":"test1","address":"test1"}]    
  },
  {
    "id": 4,
    "status": "YELLOW",
    "Shop":"ABC",
    "ownerDetails":[ {"name":"test1","address":"test1"}]
  },
  {
    "id": 5,
    "status": "RED",
    "Shop":"ABC",
    "ownerDetails":[ {"name":"test1","address":"test1"}]
  },
  {
    "id":6,
    "status": "GREEN",
    "Shop":"ABC",
    "ownerDetails":[ {"name":"test1","address":"test1"}]
  },
  {
    "id": 7,
    "status": "GREEN",
    "Shop":"XYZ",
    "ownerDetails":[ {"name":"test2","address":"test2"}]
  },
   {
    "id": 8,
    "status": "ORANGE",
    "Shop":"XYZ",
    "ownerDetails":[ {"name":"test2","address":"test2"}]    
  },
  {
    "id": 9,
    "status": "YELLOW",
    "Shop":"ABC",
    "ownerDetails":[ {"name":"test1","address":"test1"}]
  },
  {
    "id": 10,
    "status": "GREEN",
    "Shop":"EFG",
    "ownerDetails":[ {"name":"test3","address":"test3"}]
  },
{
    "id": 11,
    "status": "GREEN",
    "Shop":"EFG",
    "ownerDetails":[ ]
  }
];
    
    const itemsWithCount = items.map(item => ({
      ...item,
      Count: items.filter(({ status, Shop }) => item.status === status && item.Shop === Shop).length
    }));

For each item of your array, you keep the current value of the item (the `...item`) and you add a `Count` property, that will get the count for this item by filtering the array to keep only the item that have the same status and shop and you get the length of that array.