Related
I have a function which takes the input from the form and runs the some method on the Array prototype, and I am then changing state in the isInAPI && wasAPICallMade (i've inserted the data in a code snippet) essentially if I should be getting something either way as the wasAPICallMade state is getting updated, but it's not.
What am I doing wrong?
indgredients[{
id: 1,
name: 'Hemp Protein'
}, {
id: 2,
name: 'Avocado'
}, {
id: 3,
name: 'Organic Maca'
}, {
id: 4,
name: 'Organic Kale'
}, {
id: 5,
name: 'Organic Coconut Water'
}, {
id: 6,
name: 'Astragalus'
}, {
id: 7,
name: 'Rhodiola'
}, {
id: 8,
name: 'Other Spices'
}, {
id: 9,
name: 'Green Coffee Beans'
}, {
id: 10,
name: 'Organic Peach'
}, {
id: 11,
name: 'Organic Seabuckthorn'
}, {
id: 12,
name: 'Hijiki Seaweed'
}, {
id: 13,
name: 'Organic Turmeric'
}, {
id: 14,
name: 'Organic Ginger'
}, {
id: 15,
name: 'Lime Juice'
}, {
id: 16,
name: 'Bell Pepper'
}, {
id: 17,
name: 'Organic Spinach'
}, {
id: 18,
name: 'Organic Flax Seeds'
}, {
id: 19,
name: 'Organic Goji Berry'
}, {
id: 20,
name: 'Organic Chlorella'
}, {
id: 21,
name: 'Organic Nutmeg'
}, {
id: 22,
name: 'Kale'
}, {
id: 23,
name: 'Tomato2'
}, {
id: 24,
name: 'Organic Cucumber'
}, {
id: 25,
name: 'Tamari'
}, {
id: 26,
name: 'Organic Cacao'
}, {
id: 27,
name: 'Chaga Mushroom'
}, {
id: 28,
name: 'Raw Cashew'
}, {
id: 29,
name: 'Lemon'
}, {
id: 30,
name: 'Organic Cold Brew Coffee'
}, {
id: 31,
name: 'Organic Sweet Cherry'
}, {
id: 32,
name: 'Japanese Matcha Green Tea'
}, {
id: 33,
name: 'Pink Himalayan Sea Salt'
}, {
id: 34,
name: 'Organic Coconut'
}, {
id: 35,
name: 'Watermelon'
}, {
id: 36,
name: 'Organic Wheatgrass'
}, {
id: 37,
name: 'Coconut Milk'
}, {
id: 38,
name: 'Oats'
}, {
id: 39,
name: 'Shiitake + Crimini Mushrooms'
}, {
id: 40,
name: 'Organic Apple'
}, {
id: 41,
name: 'Organic Camu Camu'
}, {
id: 42,
name: 'Organic Zucchini'
}, {
id: 43,
name: 'Organic Pea Protein'
}, {
id: 44,
name: 'Chia Seed'
}, {
id: 45,
name: 'Spinach'
}, {
id: 46,
name: 'Organic Acerola Cherry'
}, {
id: 47,
name: 'Butternut Squash Noodles'
}, {
id: 48,
name: 'Sweet Potato'
}, {
id: 49,
name: 'Galangal'
}, {
id: 50,
name: 'Basil'
}, {
id: 51,
name: 'Organic Raspberry'
}, {
id: 52,
name: 'Black Garlic'
}, {
id: 53,
name: 'Zucchini'
}, {
id: 54,
name: 'Organic Peppermint'
}, {
id: 55,
name: 'Raw Pumpkin Seed'
}, {
id: 56,
name: 'Golden Figs'
}, {
id: 57,
name: 'Papaya'
}, {
id: 58,
name: 'Dulse Seaweed'
}, {
id: 59,
name: 'Garlic'
}, {
id: 60,
name: 'Madras Curry'
}, {
id: 61,
name: 'Cordyceps Mushroom'
}, {
id: 62,
name: 'Tomato'
}, {
id: 63,
name: 'Reishi Mushroom'
}, {
id: 64,
name: 'Cinnamon'
}, {
id: 65,
name: 'Red Miso'
}, {
id: 66,
name: 'Macadamia Nut'
}, {
id: 67,
name: 'Organic Acai Berry'
}, {
id: 68,
name: 'Raw Almond'
}, {
id: 69,
name: 'Chickpea'
}, {
id: 70,
name: 'Organic Mango'
}, {
id: 71,
name: 'Organic Coconut Oil'
}, {
id: 72,
name: 'Organic Pineapple'
}, {
id: 73,
name: 'Organic Celery'
}, {
id: 74,
name: 'Scallion'
}, {
id: 75,
name: 'Organic Vanilla Bean'
}, {
id: 76,
name: 'Ginger'
}, {
id: 77,
name: 'Cauliflower'
}, {
id: 78,
name: 'Raw Walnut'
}, {
id: 79,
name: 'Organic Blueberry'
}, {
id: 80,
name: 'Organic Date'
}, {
id: 81,
name: 'Organic Banana'
}, {
id: 82,
name: 'Rosemary'
}, {
id: 83,
name: 'Vanilla Bean'
}, {
id: 84,
name: 'Ginseng'
}, {
id: 85,
name: 'Organic Strawberry'
}, {
id: 86,
name: 'Carrot'
}, {
id: 87,
name: 'Oregano'
}, {
id: 88,
name: 'Lemon2'
}, {
id: 89,
name: 'Organic Garbanzo Beans'
}, {
id: 90,
name: 'Organic Blackberry'
}, {
id: 91,
name: 'Organic Raw Almond Butter'
}, {
id: 92,
name: 'Pecans'
}, {
id: 93,
name: 'Organic Mulberry'
}, {
id: 94,
name: 'Organic Pepper'
}, {
id: 95,
name: 'Organic Hemp Seed'
}, {
id: 96,
name: 'Organic Pumpkin'
}, {
id: 97,
name: 'Organic Blue Majik'
}, {
id: 98,
name: 'Organic Gluten-Free Oats'
}, {
id: 99,
name: 'Organic Cardamom'
}, {
id: 100,
name: 'Lemon Juice'
},
import React, { useState } from 'react'
import Alert from '#material-ui/lab/Alert'
import TextField from '#material-ui/core/TextField'
import Grid from '#material-ui/core/Grid'
import { makeStyles } from '#material-ui/core/styles'
var useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: '25ch',
},
submit: {
color: 'red',
},
},
}))
var IngredientInput = ({ indgredients, products }) => {
var [indgredients, setIngredients] = useState(indgredients)
var [text, setText] = useState('')
var [isInAPI, setIsInAPI] = useState(false)
var [wasAPICallMade, setWastAPICallMade] = useState(false)
function CheckIngredients(input) {
if (indgredients.some((item) => item.name === input)) {
setIsInAPI((prevState) => !prevState)
console.log('isInAPI ', isInAPI)
setWastAPICallMade((prevState) => !prevState)
console.log('wasAPICallMade ', wasAPICallMade)
}
}
function handleTextChange(e) {
console.log('e', e.target.value)
setText(e.target.value)
}
function handleSubmit(e) {
e.preventDefault()
CheckIngredients(text)
setText('')
}
var classes = useStyles()
return (
<>
<Grid container justify="center">
<form onSubmit={handleSubmit} className={classes.root}>
<TextField
value={text}
onChange={handleTextChange}
id="outlined-basic"
label="Outlined"
variant="outlined"
/>
<button type="submit" className={classes.submit}>
{' '}
Check Ingredient{' '}
</button>
</form>
{wasAPICallMade ? (
isInAPI ? (
<Alert severity="success">
This is a success alert — check it out!
</Alert>
) : (
<Alert severity="error">
This is an error alert — check it out!
</Alert>
)
) : null}
</Grid>
</>
)
}
export default IngredientInput
Update
Based on what Emile and Lanxion suggested I tried this:
useEffect(() => {
console.log('isInAPI in useEffect', isInAPI)
console.log('wasAPICallMade in useEffect', wasAPICallMade)
}, [isInAPI, wasAPICallMade])
function CheckIngredients(input) {
setWastAPICallMade(true)
var found = indgredients.some((item) => item.name === input)
console.log('found ', found)
if (found) {
setIsInAPI(true)
console.log('isInAPI ', isInAPI)
}
}
Now two questions with this change:
I'm correct in understanding useEffect will fire on the initial render and everytime changes to those variables are made? If not, useEffect won't fire.
So in the CheckIngredients function setWastAPICallMade(true) gets ignored?
Also why doesn't var found = indgredients.some((item) => item.name === input) have the correct response???
function CheckIngredients(input) {
setWastAPICallMade(true)
var found = indgredients.some((item) => item.name === input)
console.log('found ', found)
if (found) {
setIsInAPI(true)
console.log('isInAPI ', isInAPI)
}
}
Most likely, your state is being updated, but useState hook functions are asynchronous, so if you log the state right in the next line, it may not reflect the change immediately. If you would like to check the value of a specific state after change to it, you can use a useEffect hook with the second value as the state variable that you are watching.
useEffect(() => {
console.log('isInAPI ', isInAPI);
console.log('wasAPICallMade ', wasAPICallMade)
}, [isInAPI, wasAPICallMade])// This is be executed when "isinApi" or "wasAPICallMade" state changes
I have this array on input :
const categories = [
{ id: 9, name: 'General Knowledge' },
{ id: 10, name: 'Entertainment: Books' },
{ id: 11, name: 'Entertainment: Film' },
{ id: 12, name: 'Entertainment: Music' },
{ id: 13, name: 'Entertainment: Musicals & Theatres' },
{ id: 14, name: 'Entertainment: Television' },
{ id: 15, name: 'Entertainment: Video Games' },
{ id: 16, name: 'Entertainment: Board Games' },
{ id: 17, name: 'Science & Nature' },
{ id: 18, name: 'Science: Computers' },
{ id: 19, name: 'Science: Mathematics' },
{ id: 20, name: 'Mythology' },
{ id: 21, name: 'Sports' },
{ id: 22, name: 'Geography' },
{ id: 23, name: 'History' },
{ id: 24, name: 'Politics' },
{ id: 25, name: 'Art' },
{ id: 26, name: 'Celebrities' },
{ id: 27, name: 'Animals' },
{ id: 28, name: 'Vehicles' },
{ id: 29, name: 'Entertainment: Comics' },
{ id: 30, name: 'Science: Gadgets' },
{ id: 31, name: 'Entertainment: Japanese Anime & Manga' },
{ id: 32, name: 'Entertainment: Cartoon & Animations' }
]
I need to translate all the keys name of my objects.
For that, I use the google translation API.
here is the code :
googleTranslate.translate(categories.map(i => i.name), 'en', 'fr', function(err, translations) {
console.log(translations.map(tr => tr.translatedText))
})
So the result is :
[ 'Culture générale',
'Divertissement: livres',
'Divertissement: Film',
'Divertissement: Musique',
'Divertissement: comédies musicales et théâtres',
'Divertissement: Télévision',
'Divertissement: jeux vidéo',
'Divertissement: jeux de société',
'Science et nature',
'Science: Informatique',
'Science: Mathématiques',
'Mythologie',
'Des sports',
'La géographie',
'L\'histoire',
'Politique',
'Art',
'Célébrités',
'Animaux',
'Véhicules',
'Divertissement: BD',
'Science: Gadgets',
'Divertissement: anime et manga japonais',
'Divertissement: dessin animé et animations' ]
But I would like to keep the structure of the first array. Only update the keys name with the translations.
Output :
const categories = [
{ id: 9, name: 'Culture générale' },
{ id: 10, name: 'Divertissement: livres' },
{ id: 11, name: 'Divertissement: Film' },
{ id: 12, name: 'Divertissement: Musique' },
{ id: 13, name: 'Divertissement: comédies musicales et théâtres' },
{ id: 14, name: 'Divertissement: Télévision' },
{ id: 15, name: 'Divertissement: jeux vidéo' },
{ id: 16, name: 'Divertissement: jeux de société' },
{ id: 17, name: 'Science et nature' },
{ id: 18, name: 'Science: Informatique' },
{ id: 19, name: 'Science: Mathématiques' },
{ id: 20, name: 'Mythologie' },
{ id: 21, name: 'Des sports' },
{ id: 22, name: 'La géographie' },
{ id: 23, name: 'L\'histoire' },
{ id: 24, name: 'Politique' },
{ id: 25, name: 'Art' },
{ id: 26, name: 'Célébrités' },
{ id: 27, name: 'Animaux' },
{ id: 28, name: 'Véhicules' },
{ id: 29, name: 'Divertissement: BD' },
{ id: 30, name: 'Science: Gadgets' },
{ id: 31, name: 'Divertissement: anime et manga japonais' },
{ id: 32, name: 'Divertissement: dessin animé et animations' }
]
I have not found how to do it yet.
Thanks in advance for your time.
The simplest way is:
googleTranslate.translate(categories.map(i => i.name), 'en', 'fr', function(err, translations) {
console.log(translations.map(tr => {
id: tr.id,
name: tr.name
}
))
})
You could recreate the old structure after the translation:
const categories [...];
const translatedCategories = new Array();
googleTranslate.translate(categories.map(i => i.name), 'en', 'fr', function(err, translations) {
translations.forEach((tr, index) => {
translatedCategories.push({
id: categories[index].id,
name: tr.translatedText
});
});
});
if you want to just change the name of your categories, this should do the trick...
function replace(categories, result) {
for (let i = 0; i < categories.length; i++) {
categories[i].name = result[i];
}
return categories;
}
have a look at the snippet, it's simple.
const categories = [
{ id: 9, name: 'General Knowledge' },
{ id: 10, name: 'Entertainment: Books' },
{ id: 11, name: 'Entertainment: Film' },
{ id: 12, name: 'Entertainment: Music' },
{ id: 13, name: 'Entertainment: Musicals & Theatres' },
{ id: 14, name: 'Entertainment: Television' },
{ id: 15, name: 'Entertainment: Video Games' },
{ id: 16, name: 'Entertainment: Board Games' },
{ id: 17, name: 'Science & Nature' },
{ id: 18, name: 'Science: Computers' },
{ id: 19, name: 'Science: Mathematics' },
{ id: 20, name: 'Mythology' },
{ id: 21, name: 'Sports' },
{ id: 22, name: 'Geography' },
{ id: 23, name: 'History' },
{ id: 24, name: 'Politics' },
{ id: 25, name: 'Art' },
{ id: 26, name: 'Celebrities' },
{ id: 27, name: 'Animals' },
{ id: 28, name: 'Vehicles' },
{ id: 29, name: 'Entertainment: Comics' },
{ id: 30, name: 'Science: Gadgets' },
{ id: 31, name: 'Entertainment: Japanese Anime & Manga' },
{ id: 32, name: 'Entertainment: Cartoon & Animations' }
]
const result = [ 'Culture générale',
'Divertissement: livres',
'Divertissement: Film',
'Divertissement: Musique',
'Divertissement: comédies musicales et théâtres',
'Divertissement: Télévision',
'Divertissement: jeux vidéo',
'Divertissement: jeux de société',
'Science et nature',
'Science: Informatique',
'Science: Mathématiques',
'Mythologie',
'Des sports',
'La géographie',
'L\'histoire',
'Politique',
'Art',
'Célébrités',
'Animaux',
'Véhicules',
'Divertissement: BD',
'Science: Gadgets',
'Divertissement: anime et manga japonais',
'Divertissement: dessin animé et animations' ];
let catNew = replace(categories, result);
console.log(catNew);
function replace(categories, result) {
for (let i = 0; i < categories.length; i++) {
categories[i].name = result[i];
}
return categories;
}
What might be the easiest solution in lodash to recursively find item in array by, for example, 'text' field with value 'Item-1-5-2'?
const data = [
{
id: 1,
text: 'Item-1',
children: [
{ id: 11, text: 'Item-1-1' },
{ id: 12, text: 'Item-1-2' },
{ id: 13, text: 'Item-1-3' },
{ id: 14, text: 'Item-1-4' },
{
id: 15,
text: 'Item-1-5',
children: [
{ id: 151, text: 'Item-1-5-1' },
{ id: 152, text: 'Item-1-5-2' },
{ id: 153, text: 'Item-1-5-3' },
]
},
]
},
{
id: 2,
text: 'Item-2',
children: [
{ id: 21, text: 'Item-2-1' },
{ id: 22, text: 'Item-2-2' },
{ id: 23, text: 'Item-2-3' },
{ id: 24, text: 'Item-2-4' },
{ id: 25, text: 'Item-2-5' },
]
},
{ id: 3, text: 'Item-3' },
{ id: 4, text: 'Item-4' },
{ id: 5, text: 'Item-5' },
];
Thank You!
In plain Javascript, you could use Array#some recursively.
function getObject(array, key, value) {
var o;
array.some(function iter(a) {
if (a[key] === value) {
o = a;
return true;
}
return Array.isArray(a.children) && a.children.some(iter);
});
return o;
}
var data = [{ id: 1, text: 'Item-1', children: [{ id: 11, text: 'Item-1-1' }, { id: 12, text: 'Item-1-2' }, { id: 13, text: 'Item-1-3' }, { id: 14, text: 'Item-1-4' }, { id: 15, text: 'Item-1-5', children: [{ id: 151, text: 'Item-1-5-1' }, { id: 152, text: 'Item-1-5-2' }, { id: 153, text: 'Item-1-5-3' }, ] }, ] }, { id: 2, text: 'Item-2', children: [{ id: 21, text: 'Item-2-1' }, { id: 22, text: 'Item-2-2' }, { id: 23, text: 'Item-2-3' }, { id: 24, text: 'Item-2-4' }, { id: 25, text: 'Item-2-5' }, ] }, { id: 3, text: 'Item-3' }, { id: 4, text: 'Item-4' }, { id: 5, text: 'Item-5' }, ];
console.log(getObject(data, 'text', 'Item-1-5-2'));
.as-console-wrapper { max-height: 100% !important; top: 0; }
It's the perfect spot for a recursive function.
function findText(items, text) {
if (!items) { return; }
for (const item of items) {
// Test current object
if (item.text === text) { return item; }
// Test children recursively
const child = findText(item.children, text);
if (child) { return child; }
}
}
That's also the best way to get the maximum performances. Traversal is some in depth-first-search way.
var firstOne = [
{ id: 22, value: 'hi there' },
{ id: 28, value: 'here' },
{ id: 77, value: 'what' }
];
var secondOne = [
{ id: 2, value: 'bond' },
{ id: 8, value: 'foobar' },
{ id: 87, value: 'what' }
];
I'm looking for the best approach to compare two arrays of objects by value. If value is same in both, then remove it from firstOne which would result in:
var firstOne = [
{ id: 22, value: 'hi there' },
{ id: 28, value: 'here' }
];
var secondOne = [
{ id: 2, value: 'bond' },
{ id: 8, value: 'foobar' },
{ id: 87, value: 'what' }
];
Javascript or Angular solutions would be appreciated. Thanks
You could use Set for the filtering.
var firstOne = [{ id: 22, value: 'hi there' }, { id: 28, value: 'here' }, { id: 77, value: 'what' }],
secondOne = [{ id: 2, value: 'bond' }, { id: 8, value: 'foobar' }, { id: 87, value: 'what' }],
mySet = new Set;
secondOne.forEach(function (a) {
mySet.add(a.value);
});
firstOne = firstOne.filter(function (a) {
return !mySet.has(a.value);
});
console.log(firstOne);
ES6
var firstOne = [{ id: 22, value: 'hi there' }, { id: 28, value: 'here' }, { id: 77, value: 'what' }],
secondOne = [{ id: 2, value: 'bond' }, { id: 8, value: 'foobar' }, { id: 87, value: 'what' }],
mySet = new Set;
secondOne.forEach(a => mySet.add(a.value));
firstOne = firstOne.filter(a => !mySet.has(a.value));
console.log(firstOne);
I need to merge two json object based on key value using javascript.
I have two different variable g and c.
terms: All values need to merge.
var g = [ { id: 36, name: 'AAA', goal: 'yes' },
{ id: 40, name: 'BBB', goal: 'yes' },
{ id: 57, name: 'CCC', goal: 'yes' },
{ id: 4, name: 'DDD', goal: 'yes' },
{ id: 39, name: 'EEE', goal: 'yes' },
{ id: 37, name: 'FFF', goal: 'yes' },
{ id: 59, name: 'GGG', goal: 'yes' },
{ id: 50, name: 'III', goal: 'yes' },
{ id: 43, name: 'HHH', goal: 'yes' },
{ id: 35, name: 'JJJ', goal: 'yes' } ]
var c = [ { id: 36, name: 'AAA', circle: 'yes' },
{ id: 40, name: 'BBB', circle: 'yes' },
{ id: 57, name: 'CCC', circle: 'yes' },
{ id: 42, name: 'ZZZ', circle: 'yes' },
{ id: 4, name: 'DDD', circle: 'yes' },
{ id: 39, name: 'EEE', circle: 'yes' },
{ id: 37, name: 'FFF', circle: 'yes' },
{ id: 59, name: 'GGG', circle: 'yes' },
{ id: 43, name: 'HHH', circle: 'yes' },
{ id: 35, name: 'JJJ', circle: 'yes' },
{ id: 100, name: 'JJJ', circle: 'yes' } ]
I tried the following code: but i merge what are have same id in 'c' variable. but i need to merge compare 'g' and 'c'.
var arrayList = [];
for(var i in g) {
var getid = g[i].id;
var getname = g[i].name;
var getgoal = g[i].goal;
for(var j in c){
var compareid = c[j].id;
if(getid == compareid){
var obj = {};
obj.id = getid;
obj.name = getname;
obj.goal = 'yes';
obj.circle = 'yes';
console.log(obj);
arrayList.push(obj);
}
}
}
console.log(arrayList);
Expected output:
[ { id: 36, name: 'AAA', goal: 'yes',circle: 'yes' },
{ id: 40, name: 'BBB', goal: 'yes',circle: 'yes' },
{ id: 57, name: 'CCC', goal: 'yes',circle: 'yes' },
{ id: 4, name: 'DDD', goal: 'yes' ,circle: 'yes' },
{ id: 39, name: 'EEE', goal: 'yes' ,circle: 'yes' },
{ id: 37, name: 'FFF', goal: 'yes' ,circle: 'yes'},
{ id: 59, name: 'GGG', goal: 'yes' ,circle: 'yes'},
{ id: 50, name: 'III', goal: 'yes' ,circle: 'no'},
{ id: 43, name: 'HHH', goal: 'yes' ,circle: 'yes'},
{ id: 35, name: 'JJJ', goal: 'yes' ,circle: 'yes'} ,
{ id: 42, name: 'ZZZ', goal: 'no' , circle: 'yes' },
{ id: 100, name: 'JJJ',goal: 'no' , circle: 'yes' }]
You forgot to push obj in the first loop in case the id doesn't exist in c and to loop through c in case one or more id's of that object does not exist in g.
var g = [
{ id: 36, name: 'AAA', goal: 'yes' },
{ id: 40, name: 'BBB', goal: 'yes' },
{ id: 57, name: 'CCC', goal: 'yes' },
{ id: 4, name: 'DDD', goal: 'yes' },
{ id: 39, name: 'EEE', goal: 'yes' },
{ id: 37, name: 'FFF', goal: 'yes' },
{ id: 59, name: 'GGG', goal: 'yes' },
{ id: 50, name: 'III', goal: 'yes' },
{ id: 43, name: 'HHH', goal: 'yes' },
{ id: 35, name: 'JJJ', goal: 'yes' }
],
c = [
{ id: 36, name: 'AAA', circle: 'yes' },
{ id: 40, name: 'BBB', circle: 'yes' },
{ id: 57, name: 'CCC', circle: 'yes' },
{ id: 42, name: 'ZZZ', circle: 'yes' },
{ id: 4, name: 'DDD', circle: 'yes' },
{ id: 39, name: 'EEE', circle: 'yes' },
{ id: 37, name: 'FFF', circle: 'yes' },
{ id: 59, name: 'GGG', circle: 'yes' },
{ id: 43, name: 'HHH', circle: 'yes' },
{ id: 35, name: 'JJJ', circle: 'yes' },
{ id: 100, name: 'JJJ', circle: 'yes' }
],
arrayList = [], obj_c_processed = [];
for (var i in g) {
var obj = {id: g[i].id, name: g[i].name, goal: g[i].goal};
for (var j in c) {
if (g[i].id == c[j].id) {
obj.circle = c[j].circle;
obj_c_processed[c[j].id] = true;
}
}
obj.circle = obj.circle || 'no';
arrayList.push(obj);
}
for (var j in c){
if (typeof obj_c_processed[c[j].id] == 'undefined') {
arrayList.push({id: c[j].id, name: c[j].name, goal: 'no', circle: c[j].circle});
}
}
console.log(arrayList);
Using undescore.js, you can write some function like this:
var a = [ { id: 36, name: 'AAA', goal: 'yes' },
{ id: 40, name: 'BBB', goal: 'yes' },
{ id: 57, name: 'CCC', goal: 'yes' },
{ id: 4, name: 'DDD', goal: 'yes' },
{ id: 39, name: 'EEE', goal: 'yes' },
{ id: 37, name: 'FFF', goal: 'yes' },
{ id: 59, name: 'GGG', goal: 'yes' },
{ id: 50, name: 'III', goal: 'yes' },
{ id: 43, name: 'HHH', goal: 'yes' },
{ id: 35, name: 'JJJ', goal: 'yes' } ];
var b = [ { id: 36, name: 'AAA', circle: 'yes' },
{ id: 40, name: 'BBB', circle: 'yes' },
{ id: 57, name: 'CCC', circle: 'yes' },
{ id: 42, name: 'ZZZ', circle: 'yes' },
{ id: 4, name: 'DDD', circle: 'yes' },
{ id: 39, name: 'EEE', circle: 'yes' },
{ id: 37, name: 'FFF', circle: 'yes' },
{ id: 59, name: 'GGG', circle: 'yes' },
{ id: 43, name: 'HHH', circle: 'yes' },
{ id: 35, name: 'JJJ', circle: 'yes' },
{ id: 100, name: 'JJJ', circle: 'yes' } ];
function merge_object_arrays (arr1, arr2, match) {
return _.union(
_.map(arr1, function (obj1) {
var same = _.find(arr2, function (obj2) {
return obj1[match] === obj2[match];
});
return same ? _.extend(obj1, same) : obj1;
}),
_.reject(arr2, function (obj2) {
return _.find(arr1, function(obj1) {
return obj2[match] === obj1[match];
});
})
);
}
document.getElementsByTagName('pre')[0].innerHTML = JSON.stringify(
merge_object_arrays(a, b, 'id'), null, 2
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<pre>
</pre>
Try running it here.
Try using jquery. Try this :
var g= [
{ id: 36, name: 'AAA', goal: 'yes' },
{ id: 40, name: 'BBB', goal: 'yes' },
{ id: 57, name: 'CCC', goal: 'yes' },
{ id: 4, name: 'DDD', goal: 'yes' },
{ id: 39, name: 'EEE', goal: 'yes' },
{ id: 37, name: 'FFF', goal: 'yes' },
{ id: 59, name: 'GGG', goal: 'yes' },
{ id: 50, name: 'III', goal: 'yes' },
{ id: 43, name: 'HHH', goal: 'yes' },
{ id: 35, name: 'JJJ', goal: 'yes' } ];
var c= [
{ id: 36, name: 'AAA', circle: 'yes' },
{ id: 40, name: 'BBB', circle: 'yes' },
{ id: 57, name: 'CCC', circle: 'yes' },
{ id: 42, name: 'ZZZ', circle: 'yes' },
{ id: 4, name: 'DDD', circle: 'yes' },
{ id: 39, name: 'EEE', circle: 'yes' },
{ id: 37, name: 'FFF', circle: 'yes' },
{ id: 59, name: 'GGG', circle: 'yes' },
{ id: 43, name: 'HHH', circle: 'yes' },
{ id: 35, name: 'JJJ', circle: 'yes' },
{ id: 100, name: 'JJJ', circle: 'yes' } ];
var combine_obj={};
$.extend(combine_obj, g, c);
OR using simple javascript
var combine_obj={};
for(var key in g) combine_obj[key]=g[key];
for(var key in c) combine_obj[key]=c[key];
You could do it like this,
var g = [ { id: 36, name: 'AAA', goal: 'yes' },
{ id: 40, name: 'BBB', goal: 'yes' },
{ id: 57, name: 'CCC', goal: 'yes' },
{ id: 4, name: 'DDD', goal: 'yes' },
{ id: 39, name: 'EEE', goal: 'yes' },
{ id: 37, name: 'FFF', goal: 'yes' },
{ id: 59, name: 'GGG', goal: 'yes' },
{ id: 50, name: 'III', goal: 'yes' },
{ id: 43, name: 'HHH', goal: 'yes' },
{ id: 35, name: 'JJJ', goal: 'yes' } ]
var c = [ { id: 36, name: 'AAA', circle: 'yes' },
{ id: 40, name: 'BBB', circle: 'yes' },
{ id: 57, name: 'CCC', circle: 'yes' },
{ id: 42, name: 'ZZZ', circle: 'yes' },
{ id: 4, name: 'DDD', circle: 'yes' },
{ id: 39, name: 'EEE', circle: 'yes' },
{ id: 37, name: 'FFF', circle: 'yes' },
{ id: 59, name: 'GGG', circle: 'yes' },
{ id: 43, name: 'HHH', circle: 'yes' },
{ id: 35, name: 'JJJ', circle: 'yes' },
{ id: 100, name: 'JJJ', circle: 'yes' } ]
for (i = 0; i < g.length; i++) { //Loop trough first array
var curID = g[i].id; //Get ID of current object
var exists = false;
for (j = 0; j < c.length; j++) { //Loop trough second array
exixts = false;
if (curID == c[j].id){ //If id from array1 exists in array2
exixts = true;
tempObj = c[j]; //Get id,object from array 2
break;
}
}
if(exixts) {
g[i]["circle"] = tempObj.circle;//If exists add circle from array2 to the record in array1
}else{
g[i]["circle"] = "no"; //If it doesn't add circle with value "no"
}
}
for (i = 0; i < c.length; i++) { //Loop trough array 2
var curObj = c[i];
var ex = true;
g.forEach(function(row) { //Loop to check if id form array2 exists in array1
if (curObj.id == row.id){
ex = false;
}
});
if(ex){ //If it doesn't exist add goal to object with value "no" and push it into array1
curObj["goal"] = "no";
g.push(curObj);
}
}
console.debug(g);
I've added some comments to explain what is going on in the code.
Psuedo code,
//Loop trough g
//get id from g[i] and check if it exists in c
//if so
//add circle from a2 to a1[i]
//Add value of circle from c onto g[i]["circle"]
//otherwise
//Add value of "no" onto g[i]["circle"]
//Loop trough c
//If id isn't in g, add row with value c[i]["goal"] = "no" to g