change map parameter with function -javascript-react - javascript

I using chart package for data analystics
Here is my code:
const param = ['Country', 'Device_Model', 'MMA', 'Game'] // other parameters i want to use eg: Game (current)
let arr = []
const handleChangeParam = () => {
for (let i = 0; i < context.gameAdData.length; i++) {
context.gameAdData[i].map((element) =>
arr.push(element._fieldsProto.!!!Game?!!!.stringValue) // Here is parameter Game
)
}
return arr
}
here is ss:
I need to replace the 'Game' parameter that I specified in the exclamation point with other parameters in the first line.
The image that comes to my mind is as follows, I click the buttons and pull the relevant data

const param = ['Country', 'Device_Model', 'MMA', 'Game']
let arr = []
const handleChangeParam = () => {
for (let i = 0; i < context.gameAdData.length; i++) {
context.gameAdData[i].map((element) =>
arr.push(element._fieldsProto.[param[i]]?.stringValue)
)
}
return arr
}

Related

How to transform a plain text file to JSON [duplicate]

I have data in CSV format data and want to convert into JSON format using Javascript.
Following are csv format:
[Test.csv]
id;name;author
integer;string;authors:n
1;To Kill an Angry Bird;1
[authors.csv]
id;name
integer;string
1;Harper Lee
2;JRR Tolkien
3;William Shakespeare
I want to get all the books with their authors. So please how can I implement it using Javascript.
The below should work for you.
All credit to http://techslides.com/convert-csv-to-json-in-javascript
//var csv is the CSV file with headers
function csvJSON(csv){
var lines=csv.split("\n");
var result = [];
// NOTE: If your columns contain commas in their values, you'll need
// to deal with those before doing the next step
// (you might convert them to &&& or something, then covert them back later)
// jsfiddle showing the issue https://jsfiddle.net/
var headers=lines[0].split(",");
for(var i=1;i<lines.length;i++){
var obj = {};
var currentline=lines[i].split(",");
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//return result; //JavaScript object
return JSON.stringify(result); //JSON
}
I would check out out PapaParse. They have a file called papaparse.min.js that you can drop into your project if need be. PapaParse has no dependencies.
I have used it myself and can verify it works, is convenient, and is well-documented.
Base on #DelightedD0D, I would add if (!lines[i]) continue so it can ignore any empty line and trailing lines.
function csvJSON(csv) {
const lines = csv.split('\n')
const result = []
const headers = lines[0].split(',')
for (let i = 1; i < lines.length; i++) {
if (!lines[i])
continue
const obj = {}
const currentline = lines[i].split(',')
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j]
}
result.push(obj)
}
return result
}
I think, I have a better solution, this also have one issue i.e. the values should not contain comma(,). Otherwise it is a best solution.
// convert csv to json
csvJSON(csvText) {
let lines = [];
const linesArray = csvText.split('\n');
// for trimming and deleting extra space
linesArray.forEach((e: any) => {
const row = e.replace(/[\s]+[,]+|[,]+[\s]+/g, ',').trim();
lines.push(row);
});
// for removing empty record
lines.splice(lines.length - 1, 1);
const result = [];
const headers = lines[0].split(",");
for (let i = 1; i < lines.length; i++) {
const obj = {};
const currentline = lines[i].split(",");
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//return result; //JavaScript object
// return JSON.stringify(result); //JSON
return result;
}
// For Reading CSV File
readCSV(event) {
const reader = new FileReader();
reader.readAsText(event.files[0]);
reader.onload = () => {
const text = reader.result;
const csvToJson = this.csvJSON(text);
console.log(csvToJson);
};
}
Thank you
Here is my try on your SPECIFIC example. I know it is an old question but I have used current methods
const titlesCsv = `id;name;author
integer;string;authors:n
1;To Kill an Mockingbird;1
2;Lord of the Rings;2
3;Hamlet;3`
const authorsCsv = `id;name
integer;string
1;Harper Lee
2;JRR Tolkien
3;William Shakespeare`
const parseCsv = csv => {
let lines = csv.split("\n");
const header = lines.shift().split(";")
lines.shift(); // get rid of definitions
return lines.map(line => {
const bits = line.split(";")
let obj = {};
header.forEach((h, i) => obj[h] = bits[i]); // or use reduce here
return obj;
})
};
const titles = parseCsv(titlesCsv)
const authors = parseCsv(authorsCsv)
const books = titles.map(title => {
return {
id: title.id,
name: title.name,
author: authors.find(author => author.id === title.author).name
}
})
console.log(books)
This solution fixed the comma issue.
function csvJSON(text, quoteChar = '"', delimiter = ',') {
var rows=text.split("\n");
var headers=rows[0].split(",");
const regex = new RegExp(`\\s*(${quoteChar})?(.*?)\\1\\s*(?:${delimiter}|$)`, 'gs');
const match = line => [...line.matchAll(regex)]
.map(m => m[2])
.slice(0, -1);
var lines = text.split('\n');
const heads = headers ?? match(lines.shift());
lines = lines.slice(1);
return lines.map(line => {
return match(line).reduce((acc, cur, i) => {
// replace blank matches with `null`
const val = cur.length <= 0 ? null : Number(cur) || cur;
const key = heads[i] ?? `{i}`;
return { ...acc, [key]: val };
}, {});
});
}
var csvtojson = csvJSON(SOME_CSV_DATA);
console.log(csvtojson)
I have a similar answer like #DelightedD0D but my code can be used in conjunction with Excel directly (copy and paste from Excel into a textarea).
function csvUpload(csvText){
//Split all the text into seperate lines on new lines and carriage return feeds
var allTextLines = csvText.split(/\r\n|\n/);
//Split per line on tabs and commas
var headers = allTextLines[0].split(/\t|,/);
var lines = [];
var locations = [];
for (var i=1; i<allTextLines.length; i++) {
var data = allTextLines[i].split(/\t|,/);
if (data.length == headers.length) {
var location = {"device_id":data[0], "address":data[1], "city":data[2]};
locations.push(location);
}
}
return locations;
}
This way you can use a CSV that is copied into Excel. Excel will remove the seperators like , and others and will insert newlines etc.
With the my code you can pass everything into a textfield directly from Excel and then use that to create a json.
I have the naming of the fields static here, but you could use #DelightedD0D's code to set the headers dynamically:
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}

texts in array converts to objects

I am using node to convert an array to object, I have an array looks like this
[
'items[0].book=Book1',
'items[0].color=Red',
'items[0].bookCode=#1',
'items[1].book=Book2',
'items[1].color=Yellow',
'items[1].bookCode=#2',
'items[2].book=Book3',
'items[2].color=Blue',
'items[2].bookCode=#3',
...
]
I am trying to convert it to be objets in one array
items:[
{
book: "Book1",
color: "Red",
bookCode: "#1"
},
{
book: "Book2",
color: "Yellow",
bookCode: "#2"
},
...
]
I found it is easy to conver it uses a 3rd party lib like setKeypath/set,
const obj = {};
const arr = [items......(like above)]
arr.forEach((val => {
if (val.startsWith('items[')) {
const splitWord = item.split('=');
setKeypath(obj, splitWord[0], splitWord[1]);
}
});
I am seeking a way if it can be done the same output with es6, so I don't really need a library. Thanks
const items = [
"items[0].book=Book1",
"items[0].color=Red",
"items[0].bookCode=#1",
"items[1].book=Book2",
"items[1].color=Yellow",
"items[1].bookCode=#2",
"items[2].book=Book3",
"items[2].color=Blue",
"items[2].bookCode=#3"
];
let res = [];
let currId = "";
let currItem = null;
for (let i = 0; i < items.length; i++) {
let parts = items[i].split(".");
if (currId!==parts[0] && currItem) { //new item
res.push(currItem)
currId = parts[0];
}
if (!currItem)
currItem = {};
let keyValue = parts[1].split("=");
currItem[keyValue[0]] = keyValue[1]
}
console.log({items: res})
You may first find all values by regex, and insert the attribute to each corresponding element one by one. This approach works for whatever ordering the array is, and whatever attributes there are, as long as each element follow the same pattern.
let items = [
"items[1].bookCode=#2",
"items[0].book=Book1",
"items[0].bookCode=#1",
"items[1].book=Book2",
"items[2].bookCode=#3",
"items[1].color=Yellow",
"items[2].book=Book3",
"items[2].color=Blue",
"items[0].color=Red",
"items[4].test=test!"
];
let indexPattern = /\[(\d*)\]/;
let attrPattern = /\.(.*)=/;
let valuePattern = /=(.*)/;
let obj = Object.values(
items.reduce((obj, element) => {
let index = element.match(indexPattern)[1];
let attr = element.match(attrPattern)[1];
let value = element.match(valuePattern)[1];
if (!obj.hasOwnProperty(index)) obj[index] = {};
obj[index][attr] = value;
return obj;
}, {})
);
console.log(obj);
[
'items[0].book=Book1',
'items[0].color=Red',
'items[0].bookCode=#1',
'items[1].book=Book2',
'items[1].color=Yellow',
'items[1].bookCode=#2',
'items[2].book=Book3',
'items[2].color=Blue',
'items[2].bookCode=#3',
].reduce((acc, str) => {
const index = Number(str.slice(str.indexOf('[') + 1, str.indexOf(']')));
if (!acc[index]) {
acc[index] = {};
}
const entry = [str.slice(str.indexOf('.') + 1, str.indexOf('=')), str.slice(str.indexOf('=') + 1)];
acc[index][entry[0]] = entry[1];
return acc;
}, []);
Here I pick apart the string you're given based on the consistent format, grab the index, key, and value, and then just use Array#reduce to do the work of putting the array together.
Documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
I think a smattering of regex would do the trick:
const ar = [
'items[0].book=Book1',
'items[0].color=Red',
'items[0].bookCode=#1',
'items[1].book=Book2',
'items[1].color=Yellow',
'items[1].bookCode=#2',
'items[2].book=Book3',
'items[2].color=Blue',
'items[2].bookCode=#3'
]
const result = [];
ar.forEach(item => {
const index = parseInt(item.match(/\[([0-9]+)\]/)[1]);
const params = item.split(".")[1].split("=");
if(!result[index])
result[index] = {}
result[index][params[0]] = params[1];
})
console.log(result)
Note that item.match(/\[([0-9]+)\]/) matches the number inside your brackets. match returns an array where 1 is the index of the actual value between the brackets.

create nested object from string JavaScript

I have a string like this:
let user = "req.user.role"
is there any way to convert this as nested objects for using in another value like this?
let converted_string = req.user.role
I know I can split the user with user.split(".")
my imagination :
let user = "req.user.role".split(".")
let converted_string = user[0].user[1].user[2]
I found the nearest answer related to my question : Create nested object from query string in Javascript
Try this
let user = "req.user.role";
let userObj = user.split('.').reduceRight((obj, next) => ({
[next]: obj
}), {});
console.log(userObj);
Or this, for old browsers
var user = "req.user.role";
var userArray = user.split('.'), userObj = {}, temp = userObj;
for (var i = 0; i < userArray.length; i++) {
temp = temp[userArray[i]] = {};
}
console.log(userObj);
The function getvalue() will return the nested property of a given global variable:
var user="req.user.role";
var req={user:{role:"admin"}};
function getvalue(str){
return str.split('.').reduce((r,c,i)=>i?r[c]:window[c], '');
}
console.log(getvalue(user));
I'll take my shot at this:
let user = "req.user.role"
const trav = (str, o) => {
const m = str.split('.')
let res = undefined
let i = 0
while (i < m.length) {
res = (res || o)[m[i]]
if (!res) break
i++
}
return res
}
const val = trav(user, {
req: {
user: {
role: "admin"
}
}
})
console.log(val)
this function will traversed the passed in object for the entire length of the provided string.split "." list returning either a value or undefined.
You can do it like this:
let userSplitted = "req.user.role".split('.');
let obj, o = obj = {};
userSplitted.forEach(key=>{o=o[key]={}});

Transform elements of an array into objects / Javascript

I have a challenge to create a simple Notes manager in JS, I've written a function that takes one string, gives it and id and pushes it to an array of notes.
let nextId = 0;
const getId = () => nextId++;
let notes = [{id: getId(), value: 'Note'}];
const addNote = (input) => {
notes.push({id:getId(), value: input});
console.log('Note added');
I now struggle with a function that will take multiple strings as parameters
('own', 'snail', 'platypus')
create an object for each element with id/value(string) and push it to the main array.
The result should look like:
[{ id: 1, value: 'owl'},
{ id: 2, value: 'snail'}]
So far I have this, it assigns ID correctly, but the loop fails
const batchAddNotes = (values) => {
let obj = {};
for (i = 0; i < values.length; i++) {
obj.id = (getId());
obj.value = (values[i]);}
return obj;};
To have your variables in a certain scope, I'd pack it all in a class (or a function). As you're using arrow functions, the class should be ok. To add multiple nodes the way you've shown; using var-args, you can create a method that expects those with (...input)
class Notes {
constructor() {
this.nextId = 0;
this.nodes = [{
id: this.getId(),
value: 'Note'
}];
}
addNote(input) {
this.nodes.push({
id: this.getId(),
value: input
})
}
getId() {
return this.nextId++;
}
addNotes(...input) {
input.forEach(e => this.addNote(e));
}
}
const notes = new Notes();
notes.addNotes('own', 'snail', 'platypus');
console.log(notes.nodes);
Use the functions arguments object. It's an array of all the arguments that are being passed to a function. Then you can loop over them and run your functionality on them each time.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
You could use the arguments passed in your function as var args
const addNote = _ => {
for(var i = 0; i < arguments.length; i++){
notes.push({id:getId(), value: arguments[i]});
console.log('Note added');
}
}
use rest params :
const myFn = (...values) => {
let tmpArr = [];
for(let i = 0 ; i < values.length ; i++){
tmpArr.push({
id : i + 1,
value : values[i]
});
}
return tmpArr;
}
const result = myFn('own', 'snail', 'platypus');
console.log(result);
This is how it look like when using Rest Params and reusing your first function. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).
You can add so many notes as you want (addMultipleNotes can receive indefinite number of arguments )
let nextId = 0;
const getId = () => nextId++;
let notes = [{id: getId(), value: 'Note'}];
const addSingleNote = (input) => {
notes.push({id:getId(), value: input});
console.log('Note added');
};
const addMultipleNotes = (...args) => {
for(let i = 0; i < args.length; i++){
addSingleNote(args[i]);
}
};
addMultipleNotes('one', 'two', 'three');
console.log(notes);
First of all, note how I've used an IIFE and a closure to create an id generator.
In the other hand, rest parameters, Array#map and parameter spread are your friends:
const incrId = (() => {
let id = 0
return () => ++id
})()
const valuesToNotes = (...values) => values.map(value => ({
id: incrId(),
value
}))
const notes = []
// Parameter spread (i.e. '...') gives each
// array item in the output of valuesToNotes
// as if you would use Function#apply
notes.push(...valuesToNotes('a', 'b', 'c'))
console.log(notes)
Yet another more functional approach which doesn't mutate the input notes and produces a new one with existing notes plus the ones transformed from values:
const concat = xs => ys => xs.concat(ys)
const map = f => xs => xs.map(f)
const pipe = xs => x => xs.reduce((r, f) => f(r), x)
const incrId = (() => {
let id = 0
return () => ++id
})()
const valueToNote = value => ({
id: incrId(),
value
})
const notes = []
const appendNotes = pipe([map(valueToNote), concat(notes)])
const moreNotes = appendNotes(['a', 'b', 'c'])
console.log(moreNotes)

Convert CSV data into JSON format using Javascript

I have data in CSV format data and want to convert into JSON format using Javascript.
Following are csv format:
[Test.csv]
id;name;author
integer;string;authors:n
1;To Kill an Angry Bird;1
[authors.csv]
id;name
integer;string
1;Harper Lee
2;JRR Tolkien
3;William Shakespeare
I want to get all the books with their authors. So please how can I implement it using Javascript.
The below should work for you.
All credit to http://techslides.com/convert-csv-to-json-in-javascript
//var csv is the CSV file with headers
function csvJSON(csv){
var lines=csv.split("\n");
var result = [];
// NOTE: If your columns contain commas in their values, you'll need
// to deal with those before doing the next step
// (you might convert them to &&& or something, then covert them back later)
// jsfiddle showing the issue https://jsfiddle.net/
var headers=lines[0].split(",");
for(var i=1;i<lines.length;i++){
var obj = {};
var currentline=lines[i].split(",");
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//return result; //JavaScript object
return JSON.stringify(result); //JSON
}
I would check out out PapaParse. They have a file called papaparse.min.js that you can drop into your project if need be. PapaParse has no dependencies.
I have used it myself and can verify it works, is convenient, and is well-documented.
Base on #DelightedD0D, I would add if (!lines[i]) continue so it can ignore any empty line and trailing lines.
function csvJSON(csv) {
const lines = csv.split('\n')
const result = []
const headers = lines[0].split(',')
for (let i = 1; i < lines.length; i++) {
if (!lines[i])
continue
const obj = {}
const currentline = lines[i].split(',')
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j]
}
result.push(obj)
}
return result
}
I think, I have a better solution, this also have one issue i.e. the values should not contain comma(,). Otherwise it is a best solution.
// convert csv to json
csvJSON(csvText) {
let lines = [];
const linesArray = csvText.split('\n');
// for trimming and deleting extra space
linesArray.forEach((e: any) => {
const row = e.replace(/[\s]+[,]+|[,]+[\s]+/g, ',').trim();
lines.push(row);
});
// for removing empty record
lines.splice(lines.length - 1, 1);
const result = [];
const headers = lines[0].split(",");
for (let i = 1; i < lines.length; i++) {
const obj = {};
const currentline = lines[i].split(",");
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//return result; //JavaScript object
// return JSON.stringify(result); //JSON
return result;
}
// For Reading CSV File
readCSV(event) {
const reader = new FileReader();
reader.readAsText(event.files[0]);
reader.onload = () => {
const text = reader.result;
const csvToJson = this.csvJSON(text);
console.log(csvToJson);
};
}
Thank you
Here is my try on your SPECIFIC example. I know it is an old question but I have used current methods
const titlesCsv = `id;name;author
integer;string;authors:n
1;To Kill an Mockingbird;1
2;Lord of the Rings;2
3;Hamlet;3`
const authorsCsv = `id;name
integer;string
1;Harper Lee
2;JRR Tolkien
3;William Shakespeare`
const parseCsv = csv => {
let lines = csv.split("\n");
const header = lines.shift().split(";")
lines.shift(); // get rid of definitions
return lines.map(line => {
const bits = line.split(";")
let obj = {};
header.forEach((h, i) => obj[h] = bits[i]); // or use reduce here
return obj;
})
};
const titles = parseCsv(titlesCsv)
const authors = parseCsv(authorsCsv)
const books = titles.map(title => {
return {
id: title.id,
name: title.name,
author: authors.find(author => author.id === title.author).name
}
})
console.log(books)
This solution fixed the comma issue.
function csvJSON(text, quoteChar = '"', delimiter = ',') {
var rows=text.split("\n");
var headers=rows[0].split(",");
const regex = new RegExp(`\\s*(${quoteChar})?(.*?)\\1\\s*(?:${delimiter}|$)`, 'gs');
const match = line => [...line.matchAll(regex)]
.map(m => m[2])
.slice(0, -1);
var lines = text.split('\n');
const heads = headers ?? match(lines.shift());
lines = lines.slice(1);
return lines.map(line => {
return match(line).reduce((acc, cur, i) => {
// replace blank matches with `null`
const val = cur.length <= 0 ? null : Number(cur) || cur;
const key = heads[i] ?? `{i}`;
return { ...acc, [key]: val };
}, {});
});
}
var csvtojson = csvJSON(SOME_CSV_DATA);
console.log(csvtojson)
I have a similar answer like #DelightedD0D but my code can be used in conjunction with Excel directly (copy and paste from Excel into a textarea).
function csvUpload(csvText){
//Split all the text into seperate lines on new lines and carriage return feeds
var allTextLines = csvText.split(/\r\n|\n/);
//Split per line on tabs and commas
var headers = allTextLines[0].split(/\t|,/);
var lines = [];
var locations = [];
for (var i=1; i<allTextLines.length; i++) {
var data = allTextLines[i].split(/\t|,/);
if (data.length == headers.length) {
var location = {"device_id":data[0], "address":data[1], "city":data[2]};
locations.push(location);
}
}
return locations;
}
This way you can use a CSV that is copied into Excel. Excel will remove the seperators like , and others and will insert newlines etc.
With the my code you can pass everything into a textfield directly from Excel and then use that to create a json.
I have the naming of the fields static here, but you could use #DelightedD0D's code to set the headers dynamically:
for(var j=0;j<headers.length;j++){
obj[headers[j]] = currentline[j];
}

Categories