Object.assign() for replacing objects of a json - javascript

I have JSON looks like this:
{
"ArrayInfo": [
{
"name": "A",
"Id": "1"
},
{
"name": "B",
"Id": "2"
},
{
"name": "C",
"Id": "3"
},
{
"name": "D",
"Id": "4"
}
]
}
I want to replace an object of JSON with another object.For example I have this object :
{"name":"E","Id":"5"}
and it is going to be replaced by this object of JSON:
{"name":"B","Id":"2"}
JSON should look like this :
{
"ArrayInfo": [
{
"name": "A",
"Id": "1"
},
{
"name": "E",
"Id": "5"
},
{
"name": "C",
"Id": "3"
},
{
"name": "D",
"Id": "4"
}
]
}
What I did is to use Object.assign but the new object will be added to array instead of replacing.
(all the data is going to be dynamic but for making more understandable I use static data)
const itemToReplace = { "name": "E", "Id": "5" };
const prevItem = ArrayInfo[2]
ArrayInfo = ArrayInfo.map((el, idx) => {
return Object.assign({}, el, { prevItem: itemToReplace });
});
let NewArryInfo = ArrayInfo
console.log(NewArryInfo)
The result of console.log(NewArryInfo) :
{
"ArrayInfo": [
{
"name": "A",
"Id": "1"
},
{
"name": "B",
"Id": "2"
},
{
"name": "C",
"Id": "3"
},
{
"name": "D",
"Id": "4"
}
{
"name": "E",
"Id": "5"
}
]
}

You can use Array.prototype.splice to replace an item in Array.
const replaceItem = {"name":"E","Id":"5"}
const ArrayInfo = [
{
"name": "A",
"Id": "1"
},
{
"name": "B",
"Id": "2"
},
{
"name": "C",
"Id": "3"
},
{
"name": "D",
"Id": "4"
}
];
ArrayInfo.splice(1, 1, replaceItem); // remove second item and replace
console.log(ArrayInfo);

const object = {
"ArrayInfo": [{
"name": "A",
"Id": "1"
},
{
"name": "B",
"Id": "2"
},
{
"name": "C",
"Id": "3"
},
{
"name": "D",
"Id": "4"
}
]
};
const objectToReplace = {
"name": "B",
"Id": "2"
};
const updatedObject = Object.assign({}, object, {
ArrayInfo: object.ArrayInfo.map((info) => {
if (info.Id === objectToReplace.Id && info.name === objectToReplace.name) {
return {
"name": "E",
"Id": "5"
};
}
return info;
})
});
console.log(updatedObject);

const myArr = [
{
"name": "A",
"Id": "1"
},
{
"name": "B",
"Id": "2"
},
{
"name": "C",
"Id": "3"
},
{
"name": "D",
"Id": "4"
}
];
const replaceObj = (arr, objReplaced, objToReplaceWith) => {
const replacedObjIndex = arr.findIndex(item => JSON.stringify(item) === JSON.stringify(objReplaced));
arr[replacedObjIndex] = objToReplaceWith;
console.log(arr)
return arr;
}
replaceObj(myArr, {"name":"B","Id":"2"}, {"name":"E","Id":"5"});
In this way you can replace any object, from any position in the array.
You won't have to worry about the position of the item that you want to replace in the array and also you won't need to worry about it's keys or values.

When you map over the array you could check if each item is the one you want to replace, and if it is, return the new item instead.
ArrayInfo = ArrayInfo.map((el, idx) => {
if (el.id === prevItem.id && el.name === prevItem.name) {
return itemToReplace;
}
return el;
});

Try this!
let ArrayInfo = [{"name": "A","Id": "1"},{"name": "B","Id": "2"},{"name": "C","Id": "3"},{"name": "D","Id": "4"}];
const onReplace = {"name":"E","Id":"5"};
const toReplace = {"name": "B","Id": "2"};
function replaceArray(array, onReplace, toReplace) {
const removeIndex = array.map(item => { return item.name; }).indexOf(toReplace.name);
array.splice(removeIndex, removeIndex, onReplace);
return array
}
console.log(replaceArray(ArrayInfo, onReplace, toReplace));

Related

How to combine multiple JSON object that have same key and value

How to combine JSON objects in the same response that has the same key and value with javascript? This is my data for example:
{
"data": [
{
"name": "A",
"description": {
"location": "location1",
"floor": "floor1",
},
},
{
"name": "A",
"description": {
"location": "location2",
"floor": "floor1",
},
},
{
"name": "B",
"description": {
"location": "location3",
"floor": "floor3",
},
},
]
}
And turn it into this:
{
"data": [
{
"name": "A",
"description": {
"location": ["location1","location2"],
"floor": "floor1",
},
},
{
"name": "B",
"description": {
"location": "location3",
"floor": "floor3",
},
},
]
}
Basically I am someone who is new to learning javascript. Any help would be very helpful, thank you.
You can do:
const data = {data: [{name: 'A',description: {location: 'location1',floor: 'floor1',},},{name: 'A',description: {location: 'location2',floor: 'floor1',},},{name: 'B',description: {location: 'location3',floor: 'floor3',},},],}
const result = {
data: data.data.reduce((a, { name, description }) => {
const index = a.findIndex((d) => d.name === name)
if (index >= 0) {
let location = a[index].description.location
location = Array.isArray(location) ? location : [location]
a[index].description.location = [...location, description.location]
} else {
a.push({ name, description })
}
return a
}, []),
}
console.log(result)
const list = {
"data": [
{
"name": "A",
"description": {
"location": "location1",
"floor": "floor1",
},
},
{
"name": "A",
"description": {
"location": "location2",
"floor": "floor1",
},
},
{
"name": "B",
"description": {
"location": "location3",
"floor": "floor3",
},
},
]
};
const consolidatedData = [];
for (const ele of list.data) {
const isExist = consolidatedData.find(x => x.name === ele.name);
if (!isExist) {
consolidatedData.push({
...ele
})
} else {
const objectKey = consolidatedData.findIndex(x => x.name === ele.name);
if (objectKey > -1) {
const description = consolidatedData[objectKey].description;
const newDes = ele.description;
if (newDes.location !== description.location) {
const data = consolidatedData[objectKey].description;
const added = [data.location, ele.description.location];
delete consolidatedData[objectKey].description.location
consolidatedData[objectKey].description["location"] = added
}
if (newDes.floor !== description.floor){
const data = consolidatedData[objectKey].floor;
const added = [data.floor, ele.description.floor];
delete consolidatedData[objectKey].description.floor
consolidatedData[objectKey].description["floor"] = added
}
}
}
}
console.log(JSON.stringify(consolidatedData, null, 2));
Here is a solution that uses an intermediate bucket object. The desired result object is then constructed from the bucket object:
const input = { "data": [ { "name": "A", "description": { "location": "location1", "floor": "floor1", }, }, { "name": "A", "description": { "location": "location2", "floor": "floor1", }, }, { "name": "B", "description": { "location": "location3", "floor": "floor3", }, }, ] };
let buckets = input.data.reduce((acc, obj) => {
if(!acc[obj.name]) {
acc[obj.name] = {
locations: {},
floors: {}
};
}
acc[obj.name].locations[obj.description.location] = true;
acc[obj.name].floors[obj.description.floor] = true;
return acc;
}, {});
console.log('buckets: ', buckets);
let result = {
data: Object.keys(buckets).map(name => {
let locations = Object.keys(buckets[name].locations);
let floors = Object.keys(buckets[name].floors);
return {
name: name,
description: {
location: locations.length == 1 ? locations[0] : locations,
floor: floors.length == 1 ? floors[0] : floors
}
}
})
};
console.log('result:', result);
Notes:
buckets object:
is created using an array .reduce()
array .reduce() docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
locations and floors are collected using objects instead of arrays, this is to avoid duplicate names
result object:
is using Object.keys(buckets) to get the array of names
.map() transforms each name into the desired object
your unusual array or string value for location and floor is constructed with a conditional

Building array recursively in Reactjs

I am trying to create a menuTree from fetched arrays in React. My problem is that I don't know how to build my array recursively:
Lets say I do a fetch of a mainUrl and get the array:
[
{"id":"EU","type":"l","text":"Europe"},
{"id":"AS","type":"l","text":"Asia"}
]
Since type is "l" i need to do another fetch: mainUrl/EU
Now i get:
[
{"id":"SP","type":"l","text":"Spain"},
{"id":"FR","type":"l","text":"France"}
]
Again both types are "l" so I do another fetch: mainUrl/EU/SP
Now i get:
[
{"id":"MA","type":"t","text":"Madrid"}
]
Since type is now "t" i stop and start again with France and then Asia.
Keeping in mind that i don't know the dept of they children in the array
The my array should look like this:
[
{
"id": "EU",
"type": "l",
"text": "Europe",
"children": [
{
"id": "SP",
"type": "l",
"text": "Spain",
"children":[
{
"id": "MA",
"type": "t",
"text": "Madrid"
}
]
},
{
"id": "FR",
"type": "l",
"text": "France",
"children": [
{
"id": "PA",
"type": "t",
"text": "Paris"
}
]
}
]
},
{
"id": "AS",
"type": "l",
"text": "Asia",
"children":[...]
}
]
const mainUrl = "yourMainUrl";
const fetchDataTree = async url => {
// I assume you will handle the fetch with your own method
let countryArr = await yourFetchFunction(url);
for (let key in countryArr) {
if (countryArr[key].type === "l") {
countryArr[key].children = await fetchDataTree(url + "/" + countryArr[key].id)
}
}
return countryArr
}
const yourDataTree = await fetchDataTree(mainUrl);
const results = fetch("");
function getChildren(name){
const fetchData = fetch(name);
fetchData.forEach(item => {
if (item.type === "l") {
item.children = getChildren(item.id);
}
});
return fetchData;
}
results.forEach(item => {
if (item.type === "l") {
item.children = getChildren(item.id);
}
});
and fetch is like this:
function fetch(u) {
switch (u){
case "":
return [
{
id: "EU",
type: "l",
text: "Europe"
},
{
id: "AS",
type: "l",
text: "Asia"
}
]
case "EU":
return [
{
id:"SP",
type:"l",
text:"Spain"
},
{
id:"FR",
type:"l",
text:"France"
}
];
case "SP":
return [
{
id:"MA",
type:"t",
text:"Madrid"
}
];
default:
return [];
}
};

Convert json response to table

I'm trying to convert json response to array which accepts my table (component from devextreme). I'm trying to do that on angular 6. Json looks like that:
"data": [
{
"type": "A",
"date": "2018-05",
"value": "153"
},
{
"type": "B",
"date": "2018-05",
"value": "888"
},
{
"type": "C",
"date": "2018-05",
"value": "999"
},
{
"type": "D",
"date": "2018-05",
"value": "555"
},
{
"type": "A",
"date": "2018-06",
"value": "148"
},
{
"type": "B",
"date": "2018-06",
"value": "222"
},
{
"type": "C",
"date": "2018-06",
"value": "555"
},
{
"type": "D",
"date": "2018-06",
"value": "666"
},
{
"type": "A",
"date": "2018-07",
"value": "156"
},
{
"type": "B",
"date": "2018-07",
"value": "111"
},
{
"type": "C",
"date": "2018-07",
"value": "333"
},
{
"type": "D",
"date": "2018-07",
"value": "999"
}
],
"number": "111-111"
}
]
And I need to transform it to this format:
[{
month: '2018-05',
A: 153,
B: 888,
C: 999,
D: 555
},
{
month: '2018-06',
A: 148,
B: 222,
C: 555,
D: 666
},
{
month: '2018-07',
A: 156,
B: 111,
C: 333,
D: 999
}]
Number of types can change (so there could be A and B only for example). Can anybody help me with that ? I'm using this component to present data at website https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/SimpleArray/Angular/Light/
This is how I would approach your problem:
1) Get the list of types and dates from your data source. We make use of JavaScript's Set to store the values so that the values will be unique (without duplicates).
The value from date will be considered as the unique key for each object in the result array, and the type will be the other properties of the result ('A', 'B', 'C', and 'D')
2) Once we have those 2 arrays, we will iterate through the original list to generate the object. The values of properties A, B, C, D are populated by filtering the date and type from the original list.
const list = {"data":[{"type":"A","date":"2018-05","value":"153"},{"type":"B","date":"2018-05","value":"888"},{"type":"C","date":"2018-05","value":"999"},{"type":"D","date":"2018-05","value":"555"},{"type":"A","date":"2018-06","value":"148"},{"type":"B","date":"2018-06","value":"222"},{"type":"C","date":"2018-06","value":"555"},{"type":"D","date":"2018-06","value":"666"},{"type":"A","date":"2018-07","value":"156"},{"type":"B","date":"2018-07","value":"111"},{"type":"C","date":"2018-07","value":"333"},{"type":"D","date":"2018-07","value":"999"}],"number":"111-111"};
// const dates = [...new Set(list.data.map(item => item.date))];
const dates = Array.from(list.data.map(item => item.date));
console.log(dates);
// const types = [...new Set(list.data.map(item => item.type))];
const types = Array.from(list.data.map(item => item.type));
console.log(types)
const res = dates.map(date => {
const obj = {};
types.map(type => {
obj[type] = list.data.filter(item => item.date === date && item.type === type)[0].value;
});
obj.date = date;
return obj;
});
console.log(res);
Given that your input is
let input = {
"data": [
{
"type": "A",
"date": "2018-05",
"value": "153"
},
{
"type": "B",
"date": "2018-05",
"value": "888"
},
{
"type": "C",
"date": "2018-05",
"value": "999"
},
{
"type": "D",
"date": "2018-05",
"value": "555"
},
{
"type": "A",
"date": "2018-06",
"value": "148"
},
{
"type": "B",
"date": "2018-06",
"value": "222"
},
{
"type": "C",
"date": "2018-06",
"value": "555"
},
{
"type": "D",
"date": "2018-06",
"value": "666"
},
{
"type": "A",
"date": "2018-07",
"value": "156"
},
{
"type": "B",
"date": "2018-07",
"value": "111"
},
{
"type": "C",
"date": "2018-07",
"value": "333"
},
{
"type": "D",
"date": "2018-07",
"value": "999"
}
],
"number": "111-111"
};
You can do this to get the required result in the output variable
let output = [];
input.data.forEach(function (item) {
const type = item.type;
const date = item.date;
const value = item.value;
let newlyCreated = false;
let objForMonth = output.find(x => x.month == date);
if (!objForMonth) {
newlyCreated = true;
objForMonth = {};
objForMonth.month = date;
}
objForMonth[type] = value;
if (newlyCreated) {
output.push(objForMonth);
} else {
let indexToWriteTo = output.findIndex(x => x.month == date);
output[indexToWriteTo] = objForMonth;
}
});
You can try like this
TS
let finalArray = [];
let valueA: string = null;
let valueB: string = null;
let valueC: string = null;
// Here data is a variable which contain your JSON data
for(let i = 0; i < data.length; i++) {
if (data.type === 'A') {
valueA = data[i].value;
}
if (data.type === 'B') {
valueB = data[i].value;
}
if (data.type === 'C') {
valueC = data[i].value;
}
if (data.type === 'D') {
finalArray.push({
month: data[i].date
A: valueA,
B: valueB,
C: valueC,
D: data[i].value
});
}
}
console.log(finalArray);
Let me know if it is working or not.

How to get the corresponding value from two objects

I have first data object which has a list of cafe, and second data object which has a list of cafe types.
I need find, get and display the corresponding type value from first data object and ID value from second data object.
For example: in list of cafe, I have Pinta with "type" : "3", it means that 3 is Bar from second object.
First object:
{
"list": {
"item": [
{
"ID": "31",
"name": "Staut",
"type": "1",
},
{
"ID": "34",
"name": "Pinta",
"type": "3",
}
]
}
}
And second object:
{
"list": {
"item": [
{
"ID": "1",
"name": "Restaurant",
},
{
"ID": "2",
"name": "Cafe",
},
{
"ID": "3",
"name": "Bar",
}
]
}
}
I can do it with Lodash. It is right, but I can't display it and it uses high memory.
getValues: function() {
_.forEach(CafeJSON.list.item, function(cafeValue) {
_.forEach(TypeJSON.list.item, function(typeValue){
if (cafeValue.type == typeValue.ID) {
console.log("Cafe name is: ", cafeValue.name, "and type is: ", typeValue.name)
}
})
})
}
Result:
I'd simplify the types object down to a object having key value pairs in the form of '3': 'Bar', then loop the items once, overriding the type property's value.
let list = {
"list": {
"item": [{
"ID": "31",
"name": "Staut",
"type": "1",
},
{
"ID": "34",
"name": "Pinta",
"type": "3",
}
]
}
}
let types = {
"list": {
"item": [{
"ID": "1",
"name": "Restaurant",
},
{
"ID": "2",
"name": "Cafe",
},
{
"ID": "3",
"name": "Bar",
}
]
}
}
let typesSimplified = types.list.item.reduce((a, b) => {
a[b.ID] = b.name;
return a;
}, {});
list.list.item.forEach(e => {
e.type = typesSimplified[e.type];
});
console.log(list);

How to create tree view in js

I have a dummy data like this
i need to create a tree like this
CEO
A
A1
A2
My dummy look like this
let d = [
{
"name": "CEO",
"parent": null,
"id": "5847e80312896b2fa49ce428"
},
{
"name": "A",
"parent": "5847e80312896b2fa49ce428",
"id": "5847f58289046550aa05a49d"
},
{
"name": "A1",
"parent": "5847f58289046550aa05a49d",
"id": "584804b073697edd3d372529"
},
{
"name": "A2",
"parent": "5847e80312896b2fa49ce428",
"id": "584804b073697edd3d372539"
}
];
I have tried somthing like this
var newObj = {tree:d.filter(d=>!d.parent)};
var tree = newObj.tree;
for(let k in tree){
for(let i = 0 ; i < tree.length ; i++){
newObj.tree[i]['child']=this.returnChildNode(tree[i].id,d);
}
}
console.log(newObj);
private returnChildNode(parentId ,arr){
if(arr.filter(d=>d.parent===parentId).length < 1) return null ;
else return arr.filter(d=>d.parent===parentId);
}
Output getting is
{
"tree": [
{
"name": "CEO",
"parent": null,
"id": "5847e80312896b2fa49ce428",
"child": [
{
"name": "A",
"parent": "5847e80312896b2fa49ce428",
"id": "5847f58289046550aa05a49d"
},
{
"name": "A2",
"parent": "5847e80312896b2fa49ce428",
"id": "584804b073697edd3d372539"
}
]
}
]
}
How to complete it by recursion for deep going in generic way
Here's a recursive option using reduce
let d = [{
"name": "CEO",
"parent": null,
"id": "5847e80312896b2fa49ce428"
}, {
"name": "A",
"parent": "5847e80312896b2fa49ce428",
"id": "5847f58289046550aa05a49d"
}, {
"name": "A1",
"parent": "5847f58289046550aa05a49d",
"id": "584804b073697edd3d372529"
}, {
"name": "A2",
"parent": "5847e80312896b2fa49ce428",
"id": "584804b073697edd3d372539"
}]
const rec = (parent, arr) => {
const ref = parent ? parent.id : null
const children = arr.reduce((ac, x) => {
if (x.parent === ref)
ac.push(rec(x, arr))
return ac
}, [])
if (parent)
parent.children = children
return (
parent ?
parent :
children[0]
)
}
const res = rec(null, d)
console.log(res)
You can try this :
var data = [
{
name: "CEO",
parent: null,
id: "0"
},
{
name: "A",
parent: "0",
id: "1"
},
{
name: "A1",
parent: "1",
id: "2"
},
{
name: "A2",
parent: "1",
id: "3"
},
{
name: "A3",
parent: "1",
id: "4"
},
{
name: "b",
parent: "0",
id: "5"
},
{
name: "A1",
parent: "5",
id: "6"
},
{
name: "A2",
parent: "5",
id: "7"
},
{
name: "A3",
parent: "5",
id: "8"
},
];
// data is an array in the above format
function toTree(data) {
var childrenById = {}; // of the form id: [child-ids]
var nodes = {}; // of the form id: {name: children: }
var i, row;
// first pass: build child arrays and initial node array
for (i=0; i<data.length; i++) {
row = data[i];
nodes[row.id] = {name: row.name, children: []};
if (row.parent == null) {
// assume -1 is used to mark the root's "parent"
root = row.id;
} else if (childrenById[row.parent] === undefined) {
childrenById[row.parent] = [row.id];
} else {
childrenById[row.parent].push(row.id);
}
}
// second pass: build tree, using the awesome power of recursion!
function expand(id) {
if (childrenById[id] !== undefined) {
for (var i=0; i < childrenById[id].length; i ++) {
var childId = childrenById[id][i];
nodes[id].children.push(expand(childId));
}
}
return nodes[id];
}
return expand(root);
}
console.log(JSON.stringify(toTree(data)));

Categories