score:0
Accepted answer
you can use array.map() and array.find() like this:
const newcases = this.state.cases.map(({ photo_id, ...rest }) => {
const obj = { ...rest };
this.state.photos.find(ph => {
if(ph.id === photo_id) {
obj.file = ph.file;
return true;
}
});
return obj;
});
live example:
const data = {
"cases": [{
"id": 3,
"photo_id": 14
}, {
"id": 2,
"photo_id": 0
}, {
"id": 1,
"photo_id": 13
}],
"photos": [{
"id": 6,
"file": "\/images\/1556196076cache_f50f03558d201b8eb2a9af90f0838cee.png"
}, {
"id": 11,
"file": "\/images\/1556198414cache_702c216fa5a4d75d74db237ddf97b012.png"
}, {
"id": 12,
"file": "\/images\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png"
}, {
"id": 13,
"file": "\/images\/1556726055dewekkpot.nl_short.jpg"
}, {
"id": 14,
"file": "\/images\/1556791722dewekkpot.nl_short.jpg"
}]
};
const newcases = data.cases.map(({ photo_id, ...rest }) => {
const obj = { ...rest };
data.photos.find(ph => {
if(ph.id === photo_id) {
obj.file = ph.file;
return true;
}
});
return obj;
});
console.log(newcases);
score:-1
function addphotos(cases, photos){
return cases.map(function (currentcase) {
const foundphoto = photos.find(function(currentphoto){
return currentphoto.id === currentcase.photo_id;
});
currentcase.photo_path = foundphoto? foundphoto.file : "/images/blank_image.jpg";
return currentcase;
});
};
console.log(addphotos(this.state.cases, this.state.photos));
//output: [{"id":3,"photo_id":14,"photo_path":"/images/1556791722dewekkpot.nl_short.jpg"},{"id":2,"photo_id":0,"photo_path":"images/blank_image.jpg"},{"id":1,"photo_id":13,"photo_path":"/images/1556726055dewekkpot.nl_short.jpg"}]
score:1
normalise your data. convert your photos
array to an object with photo_id
as keys, for easy access.
you could do something like the following:
addphotos() {
var photosmap = this.state.photos.reduce(function (acc, each) {
acc[each.id] = each; // or you could just save the corresponding filename
return acc;
}, {});
var photofiles = this.state.cases.reduce(function (acc, each) { // you could alternatively use array.filter too.
if (photosmap[each.photo_id]) {
acc.push(photosmap[each.photo_id]);
}
return acc;
}, []);
console.log(photofiles);
}
score:1
you can filter the objects as below snippet and use it to render your view.
const obj = {
"cases": [{
"id": 3,
"photo_id": 14
}, {
"id": 2,
"photo_id": 0
}, {
"id": 1,
"photo_id": 13
}],
"photos": [{
"id": 6,
"file": "\/images\/1556196076cache_f50f03558d201b8eb2a9af90f0838cee.png"
}, {
"id": 11,
"file": "\/images\/1556198414cache_702c216fa5a4d75d74db237ddf97b012.png"
}, {
"id": 12,
"file": "\/images\/1556198946cache_702c216fa5a4d75d74db237ddf97b012.png"
}, {
"id": 13,
"file": "\/images\/1556726055dewekkpot.nl_short.jpg"
}, {
"id": 14,
"file": "\/images\/1556791722dewekkpot.nl_short.jpg"
}]
};
const photoids = obj.cases.reduce((acc, val) => {
acc[val.photo_id] = val;
return acc;
}, {});
const res = obj.photos.filter(val => photoids[val.id]);
console.log(res)
Source: stackoverflow.com
Related Query
- How to do a foreach for an array with values that have to match specific key and the same value from another array
- How can I format an excel file with empty rows to have nested arrays and match a JSON object that I need to render?
- How to group arrays of objects by value and add the result to another array with same value at specific key
- How to loop through an array with keys and values in to send a request for Axios.get's params in ReactJS?
- How do I iterate over an array of objects match a common element from another array and return the key value for "name"
- How can i avoid adding duplicates into array and only have one value at time for specific attribute?
- How to loop through an array of objects and get specific key values in React?
- define object type with dynamic number of key and value and also that values can have string or number value
- Manipulate JSON key values with one header row array and rest header values array for table
- How do I filter through an array of objects and have that value match a value of another array in React?
- creating an empty state object that has a key value array with JSON objects as the values and than changing those json objects
- How can I use Map function for an Array with values and another array as a value in Javascript
- How can I search for a component with specific key in React Developer Tools?
- How do I take an array of objects and reduce it so that data at a repeated object key is combined?
- How to destructure props in stateless component (react) with default values into a variable and apply spread operator with that variable in JSX?
- React Query with TypeScript - how to force the rule that the query key always needs to be an array
- How to filter array and create new array with specific object keys
- How to compare each elements in an Array and group the ones that have same data (in my case date) ? JavaScript
- How can I convert this object to an array and access values by key in React?
- How to map/loop 2 array values to an anchor tag with href and text?
- How to push inside nested array of object that have a precise value of a key in MongoDB?
- React.js: How to find duplicates for properties in an array of object and put a progressive number on that field
- With React useState how do you access key values of an array returned from fetch API
- How to update a key for all my objects that are in an array
- How do I iterate though an array of objects with keys and values in react and render them in the JSX( Both keys and Values)
- How to target a specific key in a JSON object then match by id in that key's array?
- How can I break through React maps to display object that has two values one with an array other with string or number(result)
- Repeat an array object with key and values with map in react js
- How to add a string to Key of an array and get values
- how do i pass array from select html element component to two text components that have different values in the array
More Query from same tag
- React-Router Link, how to trigger a click event on a Link from another component
- OPTIONS net::ERR_CONNECTION_TIMED_OUT
- React-Bootstrap: Why renders the Alert component the text differently if the text is stored inside a state variable?
- react - MAP through an array contained in another array
- Jest + React + TypeScript: default configuration
- Javascript dictionary and to add values
- How I can draw below chart with any chart libarray
- Property 'data' does not exist on type 'void' in Redux action
- How to generate ny video Thumnail?
- Nested ApolloProviders in React
- Updating new document.body.offsetHeight in react
- how to set onClick event on a button inside a datatable in ReactJS
- How to set build .env variables when running create-react-app build script?
- React images not loading locally after gh-pages installation
- Cant pass uid from created user firebase
- Can't get value from HTML tag attribute "value" to onClick script
- No component displayed when adding a custom label to a ReferenceLine in Recharts
- Text input added to Material UI Autocomplete Paper Component losing focus after each character typed as options filter
- How to rerender a component using useEffect with only a State without loop
- Drying up/refactoring a component nin ReactJs
- rerender on prop change in react not working
- Toggle with checkbox in react
- Pending Status in Network when trying to Create new entry in table
- React - passing ref attribute as prop
- State passed to parent is updated late (after one click)
- case-insensitive queries for a Socrata SoQL
- Dynamic Input field in React Formik
- Error with docker and react, digital envelope routines::unsupported
- How to use GraphQL mutation in Next.js without useMutation
- React-icons module not found: can't resolve '../lib"