0

I have this JSON file :

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

I want to get the data from json file to an array in react for example :

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

I'm a beginner in React Please can someone help me to write the code ?

Mrabet Iheb
  • 25
  • 5

5 Answers5

2

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]);
Nishant Dixit
  • 4,704
  • 3
  • 13
  • 25
  • **Thank you that's what i need :)** – Mrabet Iheb May 17 '18 at 12:08
  • `Object.values()` does not guarantee the values to be in the correct order as object properties have no defined order in javascript. [To guarantee the order you will have to map the object to an array](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order). – trixn May 17 '18 at 12:22
2

You can parse json into an object with JSON.parse(). Then you can map every object to an array. Note that this is the only way to totally ensure the order of the properties is the desired one as object properties have no guaranteed order.

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

But I really don't know if that is a good idea. Why would you want to introduce magic numbers when you already have named properties to access in your dataset.

trixn
  • 12,247
  • 1
  • 21
  • 42
2

You can use Array.prototype.map() to return an array of array 

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]);
Abslen Char
  • 2,951
  • 3
  • 13
  • 29
  • **Thank you that's what i need :) -** – Mrabet Iheb May 17 '18 at 12:12
  • @MrabetIheb The real question is still: Why do you need [magic numbers](https://en.wikipedia.org/wiki/Magic_number_(programming)#Unnamed_numerical_constants) instead of named properties. Also mark answers as accepted / upvote if it helped you. – trixn May 17 '18 at 12:14
  • @trixn It's just an exemple so what ever named proprieties that i write or change the code still valid and thank you by the way . – Mrabet Iheb May 17 '18 at 13:21
  • @MrabetIheb No it will not be valid. If you change the property names obviously your mapping from object to array will not work anymore. Arrays should be used as containers for elements of the same type. Using it like you do is an anti-pattern in most of the cases. – trixn May 17 '18 at 13:44
1
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]
})

That's you need?

hailong
  • 11
  • 3
0

Not exactly clear what you are trying to do

Yu can use 

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

or to iterate through every property in object: 

for(var propertyName in data[0]){
    console.log(data[0][propertyName]);
}
irvins
  • 316
  • 3
  • 4