CODEWITHSUNDEEP
javascriptarraysjsonreactjs
Mrabet Iheb
Mrabet Iheb

Reputation: 25

Get exact data from json to react

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 ?

Upvotes: 0

Views: 171

Answers (5)

Abslen Char
Abslen Char

Reputation: 3135

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]);

Upvotes: 2

trixn
trixn

Reputation: 16344

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.

Upvotes: 2

hailong
hailong

Reputation: 11

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?

Upvotes: 1

Nishant Dixit
Nishant Dixit

Reputation: 5522

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]);

Upvotes: 2

irvins
irvins

Reputation: 326

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]);
}

Upvotes: 0

Related Questions