如何遍历 JSON 数组并获取特定值

Question

如何遍历下面的数组并获取“car1”的值？下面的代码返回 undefined

<script>
var myObj = {
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  },
  "cars2": {
    "car1":"Ford2",
    "car2":"BMW2",
    "car3":"Fiat2"
  }
}

for (x in myObj) {
 alert(x.car1);
}

</script>

Answer 1

在你的循环中：

for (x in myObj) {
 alert(x.car1);
}

x 是对象的键的字符串值。为了获得嵌套对象的 car1 属性，您可以将循环更改为：

for (x in myObj) {
 alert(myObj[x].car1);
}

使用hasOwnProperty 也是一个好习惯，同时使用for-in 循环它也可能会迭代对象原型链中的属性。

for (x in myObj) {
 if (myObj.hasOwnProperty(x)) {
   alert(myObj[x].car1);
 }
}

Answer 2

用于将这些值聚合到一个数组中，例如：

    let aggregated = [];
    var myObj = {
      "cars": {
        "car1":"Ford",
        "car2":"BMW",
        "car3":"Fiat"
      },
      "cars2": {
        "car1":"Ford2",
        "car2":"BMW2",
        "car3":"Fiat2"
      }
    }

    Object.keys(myObj).forEach(e => {
      aggregated.push(myObj[e].car1)
    })
    
    console.log(aggregated)

Answer 3

如果您有任何其他对象，并且您也想访问它们的属性，您可以创建嵌套循环，如下所示：

var myObj = {
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  },
  "cars2": {
    "car1":"Ford2",
    "car2":"BMW2",
    "car3":"Fiat2"
  }
}

// Iterate over the first level
for (x in myObj) {
  // Iterate over the second level
  for (y in myObj[x]) {
    document.getElementById("demo").innerHTML += myObj[x][y] + "<br>";
  }
}

<div id="demo"></div>

这样您也可以遍历myObj[cars] 和myObj[cars2] 对象属性。

Answer 4

您的car1 属性不在您尝试访问它的级别。循环遍历对象并检查下一层是否存在 car1。如果是，则显示警报。另请注意，您应该在 for in 循环中有一个 if 语句，以确保该属性存在（或某些其他条件）

var myObj = {
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  },
  "cars2": {
    "car1":"Ford2",
    "car2":"BMW2",
    "car3":"Fiat2"
  }
}

for (var x in myObj) {
 if (myObj.hasOwnProperty(x)) {
    var obj = myObj[x];
    if (obj.hasOwnProperty('car1')) {
        alert(obj.car1);
    }

 }
}

Answer 5

<script>
    var myObj = {
        "cars": {
            "car1": "Ford",
            "car2": "BMW",
            "car3": "Fiat"
        },
        "cars2": {
            "car1": "Ford2",
            "car2": "BMW2",
            "car3": "Fiat2"
        }
    }

    var res = Object.values(myObj)
        .map(i => i.car1)
        .filter(name => (name !== 'Ford2'));

    document.getElementById("demo").innerHTML = res;

Answer 6

你应该把 for 循环改成

for (x in myObj) alert(myObj[x].car1);

试试看

Answer 7

你有一个小小的疑虑。您不是在遍历数组，而是在使用 for...in 循环遍历对象的属性。

你应该小心。您可能希望通过更改为更新的遍历方法使其“安全”（不会遍历原型或不可枚举的属性）。即安全地获取对象的值，而不是键，然后使用一些较新的循环函数对其进行循环。

我们将使用Object.values 来获取值数组，因为我们不需要键，然后Array.prototype.filter() 过滤掉任何没有Object.prototype.hasownproperty() 报告的'car1' 属性的东西，最后映射它以使用Array.prototype.map() 对其进行转换。作为保留警报的一种方式，我们将使用Array.prototype.forEach() 向每个警报发出警报

Object
  .values(myObj) // since we don't care about the keys, only loop over the values
  .filter(obj => // filter out any values without a 'car1' property
    obj.hasOwnProperty('car1') 
  )
  .map(obj => obj.car1) // de-nest the car1 property
  .forEach(alert)

现在我们有了一个包含 Object 中值的 car1 属性的数组。好消息是，如果给定一个对象数组而不是嵌套对象，这将起作用，但这只是因为我们不关心保存对象的键，而只关心对象实际上具有“car1”属性

---

为了简洁而使用的技巧

箭头函数

function (a,b){ return console.log(a,b) }

可以改写为

(a,b) => console.log(a,b)

直接函数引用

[1,2,3].forEach(item => alert(item))

可以重写，因为在 JavaScript 中函数是一阶的，可以作为参数传递给其他函数

[1,2,3].forEach(alert)