从 json 获取准确数据以做出反应答案

【问题标题】：Get exact data from json to react从 json 获取准确数据以做出反应
【发布时间】：2018-05-17 11:53:16
【问题描述】：

我有这个 JSON 文件：

[{
  "name": "bagette",
  "price": "0.200"
}, {
  "name": "farine",
  "price": "1"
}, {
  "name": "tomato",
  "price": "1.200"
}, {
  "name": "chocola",
  "price": "4.000"
}]

我想将数据从 json 文件中获取到一个数组中，例如：

console.log(data[0][0]);    // bagette
console.log(data[0][1]);    // 0.200
console.log(data[1][0]);    // farine
console.log(data[3][1]);    // 4.000

我是 React 的初学者请有人帮我写代码吗？

【问题讨论】：

你能解释一下你为什么想要那个吗？
你为什么不想使用data[0]['name']和data[0]['price']？
或 data[0].name 和 data[0].price

标签： javascript arrays json reactjs

【解决方案1】：

var data = [{
  "name": "bagette",
  "price": "0.200"
}, {
  "name": "farine",
  "price": "1"
}, {
  "name": "tomato",
  "price": "1.200"
}, {
  "name": "chocola",
  "price": "4.000"
}];

data = data.map(val=>Object.values(val));

console.log(data[0][0]);    
console.log(data[0][1]);    
console.log(data[1][0]);   
console.log(data[2][1]);

【讨论】：

谢谢你，这正是我需要的:)
Object.values() 不保证值的顺序正确，因为对象属性在 javascript 中没有定义的顺序。 To guarantee the order you will have to map the object to an array.

【解决方案2】：

您可以将json 解析为带有JSON.parse() 的对象。然后您可以将每个对象映射到一个数组。请注意，这是完全确保 order of the properties 是所需的唯一方法，因为对象属性没有保证顺序。

const json = '[{"name": "bagette","price": "0.200"}, {"name": "farine","price": "1"},{"name":"tomato","price": "1.200"}, {"name": "chocola","price": "4.000"}]';

const data = JSON.parse(json);

const transformedData = data.map(obj => [obj.name, obj.price]);

console.log(transformedData[0][0]);    // bagette
console.log(transformedData[0][1]);    // 0.200
console.log(transformedData[1][0]);    // farine
console.log(transformedData[3][1]);    // 4.000

但我真的不知道这是否是个好主意。当您已经在数据集中有要访问的命名属性时，为什么还要引入 magic numbers。

【讨论】：

【解决方案3】：

你可以使用Array.prototype.map()返回一个数组数组

var data = [{
  "name": "bagette",
  "price": "0.200"
}, {
  "name": "farine",
  "price": "1"
}, {
  "name": "tomato",
  "price": "1.200"
}, {
  "name": "chocola",
  "price": "4.000"
}];

data = data.map((x)=>[x.name , x.price]);

console.log(data[0][0]);    
console.log(data[0][1]);    
console.log(data[1][0]);   
console.log(data[2][1]);

【讨论】：

谢谢你，这就是我需要的:) -
@MrabetIheb 真正的问题仍然是：为什么需要magic numbers 而不是命名属性。如果对您有帮助，也将答案标记为已接受/赞成。
@trixn 这只是一个例子，所以我编写或更改代码的任何命名规则仍然有效，顺便谢谢你。
@MrabetIheb 不，这将是无效的。如果您更改属性名称显然您从对象到数组的映射将不再起作用。数组应该用作相同类型元素的容器。在大多数情况下，像你一样使用它是一种反模式。

【解决方案4】：

let arr = [{
  "name": "bagette",
  "price": "0.200"
}, {
  "name": "farine",
  "price": "1"
}, {
  "name": "tomato",
  "price": "1.200"
}, {
  "name": "chocola",
  "price": "4.000"
}]

let data = arr.map(item=>{
    return [item.name, item.price]
})

这是你需要的吗？

【讨论】：

【解决方案5】：

不完全清楚你要做什么

你可以用

console.log(data[0].name) //bagette
console.log(data[0]['name']) //bagette

或遍历对象中的每个属性：

for(var propertyName in data[0]){
    console.log(data[0][propertyName]);
}

【讨论】：