如何获取存储在 localStorage 中的 JSON 对象的长度？答案

【问题标题】：How to get the length of a JSON object stored in localStorage?如何获取存储在 localStorage 中的 JSON 对象的长度？
【发布时间】：2019-09-22 14:22:18
【问题描述】：

我有一个 REACT JS 应用程序，其中 JSON 对象 CartObj 以这种格式存储在 localStorage 中：

{
        "Master Automotives": [
            {
                "SparePartID": "43",
                "Name": "Oil and Lubricants",
                "Price": "4500",
                "VendorID": "48",
                "CompanyName": "Master Automotives",
                 "Qty": 1,
                 "TotalPrice": "4500"

            },
            {
                "SparePartID": "45",
                "Name": "Lights",
                "Price": "2300",
                "VendorID": "48",
                "CompanyName": "Master Automotives",
                 "Qty": 1,
                 "TotalPrice": "2300"
            }
        ],

        "Repair Solutions": [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions",
                 "Qty": 1,
                 "TotalPrice": "1500"
            }
        ],
        

         "FiveStar Automotives": [
            {
                "SparePartID": "51",
                "Name": "Brakes",
                "Price": "234",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "234"
            },
            {
                "SparePartID": "53",
                "Name": "Clutch",
                "Price": "999",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "999"
            },
              {
                "SparePartID": "55",
                "Name": "LED",
                "Price": "288",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "288"
            }
        ]
    
}

我想获取上述 JSON 对象 的长度，该对象存储在我的 localStorage 中作为“CartObj”。正如我们所看到的，上面的数据总共有 6 (六) 个不同的产品，所以我想得到一个等于 6 的长度。

我使用了下面的代码，但它得到了一个非常大值，例如 23876：

const lenObj = JSON.stringify(localStorage.getItem('storeObj'));
        const len = lenObj.length;
        console.log("JSON obj length: ",len);

请帮助我如何以正确的方式获取此 JSON 对象的长度。

【问题讨论】：

标签： arrays json reactjs local-storage

【解决方案1】：

localStorage.getItem 返回一个字符串，因此您必须使用 JSON.parse 而不是 ~~JSON.stringfy~~

还有一点，你的 json 不是单个数组，它包含多个数组，如果你想计算所有长度，你应该迭代对象。

这是解决方案。

const lenObj = JSON.parse(localStorage.getItem('storeObj'));
var count = 0;
for(var item in lenObj) {
   count += lenObj[item].length
}
console.log("JSON obj length: ",count);

【讨论】：

【解决方案2】：

使用这个：

const cart = JSON.parse(localStorage.getItem('storeObj'));
const cartLength = Object.values(cart).flat().length;

或者在一行中：

const cartLength = Object.values(JSON.parse(localStorage.getItem('storeObj'))).flat().length;

【讨论】：

【解决方案3】：

你可以使用Object.values:

function getLength(obj) {
  return (Object.values(obj)).flat().length

}

console.log(getLength(obj)); // => 6

const obj = {
	'Master Automotives': [
		{
			SparePartID: '43',
			Name: 'Oil and Lubricants',
			Price: '4500',
			VendorID: '48',
			CompanyName: 'Master Automotives',
			Qty: 1,
			TotalPrice: '4500',
		},
		{
			SparePartID: '45',
			Name: 'Lights',
			Price: '2300',
			VendorID: '48',
			CompanyName: 'Master Automotives',
			Qty: 1,
			TotalPrice: '2300',
		},
	],

	'Repair Solutions': [
		{
			SparePartID: '47',
			Name: 'Steering Wheel',
			Price: '1500',
			VendorID: '60',
			CompanyName: 'Repair Solutions',
			Qty: 1,
			TotalPrice: '1500',
		},
	],

	'FiveStar Automotives': [
		{
			SparePartID: '51',
			Name: 'Brakes',
			Price: '234',
			VendorID: '70',
			CompanyName: 'FiveStar Automotives',
			Qty: 1,
			TotalPrice: '234',
		},
		{
			SparePartID: '53',
			Name: 'Clutch',
			Price: '999',
			VendorID: '70',
			CompanyName: 'FiveStar Automotives',
			Qty: 1,
			TotalPrice: '999',
		},
		{
			SparePartID: '55',
			Name: 'LED',
			Price: '288',
			VendorID: '70',
			CompanyName: 'FiveStar Automotives',
			Qty: 1,
			TotalPrice: '288',
		},
	],
};

function getLength(obj) {
  return (Object.values(obj)).flat().length

}

console.log(getLength(obj));

【讨论】：