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 ?
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]);
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.
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]);
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?
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]);
}
Related
I have react project and in that have a javascript array of object similar to given below and in that object it has a value called category.
const data = [{
"id": 1,
"item": "760",
"price": "$609.05",
"category": "BMW"
}, {
"id": 2,
"item": "Frontier",
"price": "$317.89",
"category": "Nissan"
}, {
"id": 3,
"item": "Odyssey",
"price": "$603.64",
"category": "BMW"
}]
Im mapping through the list and displaying the category as shown below.
{data.map(item => (<span>{item.category}</span>))}
Here, the category duplicates and display several times when there are several similar items. Considering the given data list, the category BMW display twice.
What I want is, even if there are multiple similar categories, I only want to display once. Is this possible and how can I do it?
You could add your categories into a Set
const data = [{
"id": 1,
"item": "760",
"price": "$609.05",
"category": "BMW"
}, {
"id": 2,
"item": "Frontier",
"price": "$317.89",
"category": "Nissan"
}, {
"id": 3,
"item": "Odyssey",
"price": "$603.64",
"category": "BMW"
}]
let categories = new Set()
data.forEach(entry => {categories.add(entry.category) })
categories.forEach(cat => console.log(cat))
There can be various ways to reach the desired result. I would do it with a Set() and destructuring syntax:
{[...new Set(data.map(item => (<span>{item.category}</span>)))]}
const data = [{
"id": 1,
"item": "760",
"price": "$609.05",
"category": "BMW"
}, {
"id": 2,
"item": "Frontier",
"price": "$317.89",
"category": "Nissan"
}, {
"id": 3,
"item": "Odyssey",
"price": "$603.64",
"category": "BMW"
}]
const newData = [...new Set(data.map(item => ("<span>" + item.category + "</span>")))]
console.log(newData);
you can use {data.find(item => (<span>{item.category}</span>))}. The find() method returns the first element in the provided array that satisfies the provided testing function
You can use the filter
let array= data.filter((v,i,a)=>a.findIndex(v2=>(v2.category===v.category))===i)
and
{array.map(item => (<span>{item.category}</span>))}
const data = [{
"id": 1,
"item": "760",
"price": "$609.05",
"category": "BMW"
}, {
"id": 2,
"item": "Frontier",
"price": "$317.89",
"category": "Nissan"
}, {
"id": 3,
"item": "Odyssey",
"price": "$603.64",
"category": "BMW"
}]
function getUniqueArrayBy(arr, key) {
return [...new Map(arr.map(item => [item[key], item])).values()]
}
const filtered = getUniqueArrayBy(data, 'category');
console.log(filtered);
Use native methods .reduce and .map of Array in chain.
const categories = data.reduce((acc, {category}) => {
if (!acc.includes(category)) { // check if there's not such value in accumulator
acc.push(category); // adding category
}
return acc; // returning value
}, []) // [] is an accumulator value
.map(category => <span>{category}</span>); // iterating over result
Piece a cake.
I am working on an angular application. I have an array as follows:
[{
"Name": "Andy"
},
{
"Name": "Bayer"
},
{
"Name": "James"
},
{
"Name": "Doda"
}]
I have another array which containes data as follows:
[
{
"Name": "Andy",
"Id": "1",
"Time": "2020-06-19T11:02+00:00"
},
{
"Name": "Billy",
"Id": "2",
"Time": "2020-06-19T11:05+00:00"
},
{
"Name": "Ciena",
"Id": 5
"Time": "2020-06-19T11:05+00:00"
},
{
"Name": "Doda",
"Id": "4",
"Time": "2020-06-19T11:05+00:00"
}
]
I want a resultant array such that code should check if Name is present in first array, then it should copy data from second array for that Name and push it in resultant array. For example common name between above two array is Andy and Doda, so data from Andy and Doda should be pushed to resultant array as follows:
[{
"Name": "Andy",
"Id": "1",
"Time": "2020-06-19T11:02+00:00"
},
{
"Name": "Bayer"
},
{
"Name": "James"
},
{
"Name": "Doda",
"Id": "4",
"Time": "2020-06-19T11:05+00:00"
}]
At run time I may get many names so code should be generic. I was trying following code which I got over stackoverflow itself
this.newArray = _.map(this.resultantArray, item => {
const value = _.find(this.dataArray, ['Name', item]);
const obj = value ? value : {Name: item};
return obj;
});
But this code is not working as expected as it works fine for the first time but when data comes for second time it appends data to previous data. I want array to be populated again freshly every time I send data. Please help
You can do this with vanilla JS no need for lodash. You can first map it and inside that you can find the value from second array otherwise return the current object:
var arrayTwo = [ { "Name": "Andy", "Id": "1", "Time": "2020-06-19T11:02+00:00" }, { "Name": "Billy", "Id": "2", "Time": "2020-06-19T11:05+00:00" }, { "Name": "Ciena", "Id": "5", "Time": "2020-06-19T11:05+00:00" }, { "Name": "Doda", "Id": "4", "Time": "2020-06-19T11:05+00:00" } ];
var arrayOne = [{ "Name": "Andy"}, { "Name": "Bayer"}, { "Name": "James"}, { "Name": "Doda"}];
var result = arrayOne.map(val=>arrayTwo.find(p=>p.Name==val.Name) || val);
console.log(result);
Suppose first array name is First
First : any [] = [{"Name": "Andy"},{"Name": "Bayer"},{ "Name": "James"},{"Name": "Doda"}]
And Second array name is Second
Second : any[] = [{"Name": "Andy","Id": "1","Time": "2020-06-19T11:02+00:00"},{"Name": "Bayer"},{"Name": "James"},{"Name": "Doda","Id": "4","Time": "2020-06-19T11:05+00:00"}]
Now do looping and check each name of first if its exists in second copy from second and push in result array
result : any[] =[];
this.First.forEach((element) => {
let index = this.Second.findIndex((x) => element.Name== x.Name);
if (index > -1) {
let data = {
this.Second[index].Name,
this.Second[index].Id,
this.Second[index].time,
};
this.result.push(data);
}
}
I have json as below. what i am trying to do is calculate sum of price per each user
in this case for example, user001: 91.68
where I am in stuck is I am trying to write for loop to get those data from json but I have to assign direct usernumber(e.g. user001) to code.
I want to use that like shoppingJson[i][j] something like that
I only can get result when I write below
console.log(shoppingJson[0].user001[0].price)
how should I do to access 2d array values?
var shoppingJson = [{
"user001": [
{
"productId": "123",
"name": "Product 123",
"price": 14.23
},
{
"productId": "456",
"name": "Product 456",
"price": 4.56
},
{
"productId": "789",
"name": "Product 789",
"price": 72.89
}
]},{
"user002": [
{
"productId": "321",
"name": "Product 321",
"price": 3.21
},
{
"productId": "654",
"name": "Product 654",
"price": 61.54
},
{
"productId": "987",
"name": "Product 987",
"price": 59.87
}
]},{
"user003": [
{
"productId": "777",
"name": "Product 888",
"price": 4.213
},
{
"productId": "888",
"name": "Product 999",
"price": 6.24
},
{
"productId": "999",
"name": "Product 111",
"price": 9.71
}
]}
]
shoppingJson.forEach(function(obj) {
var totalPrice = 0;
for(key in obj) {
obj[key].forEach(function(o) {
totalPrice += o.price;
});
};
console.log(totalPrice);
});
You could use a forEach loop to iterate through each of the objects within the shoppingJson array. Then you can create a variable to store the total price, and it will be initialized to zero. For each key within the object you can do another forEach iteration (because the value of that key with be the array of objects), and add the value of "price" from that object to the totalPrice variable. If you try this on the first object in the shoppingJson array you get 91.68.
var price = {};
for(item of shoppingJson){
for( user in item ){
price[user] = 0;
for(product of item[user]){
price[user] += product.price;
}
}
}
After executing this, you will get the sums in the object price. The object price will then contain the following
{
user001: 91.68,
user002: 124.62,
user003: 20.163
}
Here is my array objects
var skus = [
{
"id": "1",
"active": true,
"attributes": {
"color": "pink",
"size": "small",
"material": "plastic"
},
"price": 899
},{
"id": "2",
"object": "sku",
"active": true,
"attributes": {
"color": "blue",
"size": "medium",
"material": "plastic"
},
"price": 500
},{
"id": "3",
"object": "sku",
"active": true,
"attributes": {
"color": "blue",
"size": "medium",
"material": "metal"
},
"price": 600
}
]
I want the output something like this :
finalOutput = {
"plastic" : [{id:1,...},{id:2,...}],
"metal" : [{id:3,...}]
}
So basically, I want to merge all the objects which have same attributes.material value.
Use lodash's _.groupBy() to collect the objects by their attributes.material.
var skus = [{"id":"1","active":true,"attributes":{"color":"pink","size":"small","material":"plastic"},"price":899},{"id":"2","object":"sku","active":true,"attributes":{"color":"blue","size":"medium","material":"plastic"},"price":500},{"id":"3","object":"sku","active":true,"attributes":{"color":"blue","size":"medium","material":"metal"},"price":600}];
var result = _.groupBy(skus, 'attributes.material');
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
... ok, let's have a look at Usman's approach ...
var skus = [{ "id": "1", "active": true, "attributes": { "color": "pink", "size": "small", "material": "plastic" }, "price": 899 }, { "id": "2", "object": "sku", "active": true, "attributes": { "color": "blue", "size": "medium", "material": "plastic" }, "price": 500 }, { "id": "3", "object": "sku", "active": true, "attributes": { "color": "blue", "size": "medium", "material": "metal" }, "price": 600 }];
var obj = {};
skus.forEach(o => {
if(!obj.hasOwnProperty(o.attributes.material)) {
obj[o.attributes.material] = [o];
} else {
obj[o.attributes.material].push(o);
}
});
console.log(obj);
.as-console-wrapper { max-height: 100%!important; top: 0; }
... it is based on an external object obj that serves both purposes, being the final result but also being the collecting reference for the time of iterating the given data structure skus.
Then there is a lookup for an existing property/key on obj that does match the value of a certain substructure of skus. In case obj does not yet features this key, an array gets assigned to a newly created property. This array already holds a single item, the current object of the skus iteration.
If the property already exists - by then it references an array - the current object of the skus iteration just will be pushed into this array.
Having finished the forEach iteration of skus, obj will hold one or more lists of former skus-items, each mapped to a single key/property of unique attributes.material-values derieved from skus-items.
A good solution provides a function that encloses all of this code.
An even better solution will come up with a more generic and better reusable approach. Since the whole matter is about transforming list based data structures, map and reduce are good candidates for it. Here the latter is the right one for map only is capable of mapping one list item into just another one, thus it does not change the list itself but it transforms each of a list's items. reduce is far more flexible for it provides into it's callback a collector/accumulator object in addition to the currently iterated item. This collector can be provided as initial value and it's type/structure is free of choice.
A reduce based approach that meets the OP's requirements needs to be customizable in terms of how to access a certain property that's value then is base of a (gouped) list of objects that share this special property value.
A working example then might look like the next provided one ...
var skus = [{ "id": "1", "active": true, "attributes": { "color": "pink", "size": "small", "material": "plastic" }, "price": 899 }, { "id": "2", "object": "sku", "active": true, "attributes": { "color": "blue", "size": "medium", "material": "plastic" }, "price": 500 }, { "id": "3", "object": "sku", "active": true, "attributes": { "color": "blue", "size": "medium", "material": "metal" }, "price": 600 }];
function collectItemGroupedByGenericKey(collector, item) {
var
groupKey = collector.getGroupKey(item),
store = collector.store,
storedList = store[groupKey];
if (!storedList) {
storedList = store[groupKey] = [];
}
storedList.push(item);
return collector;
}
var materialList = skus.reduce(collectItemGroupedByGenericKey, {
getGroupKey: function (item) { return item.attributes.material; },
store: {}
}).store;
console.log('materialList : ', materialList);
.as-console-wrapper { max-height: 100%!important; top: 0; }
I'm pretty new to Javascript, and I just learned about underscore.js. I have a deeply nested JSON object, and I need to use underscore to find key/value pairs, which I will then use to populate various HTML tables. If the structure was more shallow, using something like _.pluck would be easy, but I just don't know how to traverse past the first couple of nesting levels (i.e. surveyGDB, table, tablenames). The JSON object comes from an XML that is comprised of multiple nesting structures (mashed up from different database tables).
var JSONData =
"surveyGDB": {
"filename": "..\\Topo\\SurveyGeoDatabase.gdb",
"table": {
"tablename": [
{
"#text": "SurveyInfo\n ",
"record": {
"OBJECTID": "1",
"SiteID": "CBW05583-345970",
"Watershed": "John Day",
"VisitType": "Initial visit",
"SurveyInstrument": "Total Station",
"ImportDate": "2015-07-22T09:08:42",
"StreamName": "Duncan Creek",
"InstrumentModel": "TopCon Magnet v2.5.1",
"FieldSeason": "2015"
}
},
{
"#text": "QaQcPoints\n ",
"record": [
{
"OBJECTID": "1",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "tp",
"Count": "357"
},
{
"OBJECTID": "2",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "tb",
"Count": "92"
},
{
"OBJECTID": "3",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "to",
"Count": "8"
},
{
"OBJECTID": "4",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "bl",
"Count": "279"
},
{
"OBJECTID": "5",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "bf",
"Count": "18"
}
]
},
{
"#text": "QaQcPolygons\n ",
"record": [
{
"OBJECTID": "1",
"TIMESTAMP": "2015-07-22T09:43:08",
"SurveyExtentCount": "",
"WaterExtentCount": "",
"ChannelUnitsCount": "",
"ChannelUnitsUnique": ""
},
{
"OBJECTID": "2",
"TIMESTAMP": "2015-07-22T13:35:15",
"SurveyExtentCount": "1",
"WaterExtentCount": "1",
"ChannelUnitsCount": "21",
"ChannelUnitsUnique": "21"
}
]
}
]
}
}
}
For instance, I wanted all of the values for 'Code' in the 'QaQCPoints' table, so I tried:
var codes = _.flatten(_.pluck(JSONData.surveyGDB.table.tablename[1].record[0], "Code" ));
console.log(codes);
In the console, this returns an array with a length of 5, but with blank values.
What am I doing wrong?
I'd also rather search for the 'Code' values in the table based on something like the '#text' key value, instead of just using it's position in the object.
If I understood you correctly, you want to always search the record array within JSONData.surveyGDB.table.tablename array for some queries. This means you need to find the record based on some parameter and return something from the found record.
Do note that the record property is sometimes an array and sometimes an object (for table SurveyInfo) in your example so I'll assume you need to take this into account.
You can make a small function to extract data and handle both objects and arrays:
function extract(record, prop) {
if (Array.isArray(record)) {
return _.pluck(record, prop);
} else {
return record[prop];
}
}
Usage example:
I wanted all of the values for 'Code' in the 'QaQCPoints' table.
I'd also rather search for the 'Code' values in the table based on something like the '#text' key value, instead of just using it's position in the object.
To achieve this you first find a record using _.find, and then extract Code values from it using the method above:
var table = JSONData.surveyGDB.table.tablename;
// find an item that has `#text` property equal to `QaQcPoints`
var item = _.find(table, function(r) {
return r['#text'] === 'QaQcPoints';
});
// extract codes from the found item's record property
var code = extract(item.record, 'Code');
// output ["tp", "tb", "to", "bl", "bf"]
Running sample:
var JSONData = {
"surveyGDB": {
"filename": "..\\Topo\\SurveyGeoDatabase.gdb",
"table": {
"tablename": [{
"#text": "SurveyInfo",
"record": {
"OBJECTID": "1",
"SiteID": "CBW05583-345970",
"Watershed": "John Day",
"VisitType": "Initial visit",
"SurveyInstrument": "Total Station",
"ImportDate": "2015-07-22T09:08:42",
"StreamName": "Duncan Creek",
"InstrumentModel": "TopCon Magnet v2.5.1",
"FieldSeason": "2015"
}
}, {
"#text": "QaQcPoints",
"record": [{
"OBJECTID": "1",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "tp",
"Count": "357"
}, {
"OBJECTID": "2",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "tb",
"Count": "92"
}, {
"OBJECTID": "3",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "to",
"Count": "8"
}, {
"OBJECTID": "4",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "bl",
"Count": "279"
}, {
"OBJECTID": "5",
"TIMESTAMP": "2015-07-22T09:18:43",
"Code": "bf",
"Count": "18"
}]
}, {
"#text": "QaQcPolygons",
"record": [{
"OBJECTID": "1",
"TIMESTAMP": "2015-07-22T09:43:08",
"SurveyExtentCount": "",
"WaterExtentCount": "",
"ChannelUnitsCount": "",
"ChannelUnitsUnique": ""
}, {
"OBJECTID": "2",
"TIMESTAMP": "2015-07-22T13:35:15",
"SurveyExtentCount": "1",
"WaterExtentCount": "1",
"ChannelUnitsCount": "21",
"ChannelUnitsUnique": "21"
}]
}]
}
}
}
function extract(record, prop) {
if (Array.isArray(record)) {
return _.pluck(record, prop);
} else {
return record[prop];
}
}
var table = JSONData.surveyGDB.table.tablename;
var item = _.find(table, function(r) {
return r['#text'] === 'QaQcPoints';
});
console.dir(item);
var code = extract(item.record, 'Code');
console.log(code);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
You have a two stage problem. Stage one is figuring out which table is QaQcPoints. If that's always JSONData.surveyGDB.table.tablename[1], you're good.
The next stage is getting your data out. You can use native array manipulation most of the time (unless you're on really old browsers). So:
var table = JSONData.surveyGDB.table.tablename[1].record;
var codeArray = table.map(function(val) { return val.Code; });
Will do the trick.