Tengo dos objetos json. Necesito fusionarlos en un solo objeto que tenga la misma identificación.
Ejemplo
const [orderdetails, setOrderdetails] = useState([]); const [ordertracking, setOrdertracking] = useState([]); useEffect(() => { fetch('first api') .then((response) => response.json()) .then((json) => setOrderdetails(json)) .catch((error) => console.error(error)) .finally(() => setLoading(false)); }, []); useEffect(() => { fetch('second api') .then((response) => response.json()) .then((json) => setOrdertracking(json)) .catch((error) => console.error(error)) .finally(() => setLoading(false)); }, []);Data de muestra
Primera respuesta api en detalles del pedido
{ "statusCode": "200", "message": "success", "content": [ { subject_id: 711, topics: ["Test", "Test2"] }, { subject_id: 712, topics: ["topic1", "Topic2"] } ] }Segunda respuesta api en el seguimiento de pedidos.
{ "statusCode": "200", "message": "success", "content": [ {subject_id: 711, subject_name: "Science"}, {subject_id: 712, subject_name: "Maths"} ] }Quiero que el resultado combinado sea:
const result = [ { subject_id: "711", subjectName: "Science", topics: [ "Test", "Test2" ] }, { subject_id: "712", subjectName: "Maths", topics: [ "topic1", "Topic2" ] } ];Como puede ver, hay dos respuestas api en un formato josn. Necesito fusionar esos objetos json que están dentro de un contenido que tiene el mismo 'subject_id' y el resto de los valores como un solo dato.
Necesito una solución en javascript para mi aplicación nativa de reacción si me puede sugerir un código nativo de reacción
Supongo que estás buscando esta respuesta .
let arr1 = [ { subject_id: 711, topics: ["Test", "Test2"] }, { subject_id: 712, topics: ["topic1", "Topic2"] } ]; let arr2 = [ {subject_id: 711, subject_name: "Science"}, {subject_id: 712, subject_name: "Maths"} ]; let res = arr1.map((item, i) => Object.assign({}, item, arr2[i])); // Or the same with es6 syntax let resEs6 = arr1.map((item, i) => { return { ...item, ...arr2[i] }; });Sugeriría en lugar de hacer un result una matriz como esta:
const result = [ { subject_id: "711", subjectName: "Science", topics: [ "Test", "Test2" ] }, { subject_id: "712", subjectName: "Maths", topics: [ "topic1", "Topic2" ] } ];Lo conviertes en un objeto asignado con el subject_id:
const result = { "711":{ subjectName: "Science", topics: [ "Test", "Test2" ] }, "712":{ subjectName: "Maths", topics: [ "topic1", "Topic2" ] } ]; Y su useEffect sería más limpio si usa async/await así:
const [orderdetails, setOrderdetails] = useState([]); const [ordertracking, setOrdertracking] = useState([]); useEffect(async () => { try{ var res1 = await fetch('first api') var data1 = await res1.json() var res2 = await fetch('second api') var data2 = await res2.json() setOrderdetails(data1) setOrdertracking(data2) var res = {} for(let d1 of data1.content){ res[d1.subject_id] = { topics:d1.topics } } for(let d2 of data2.content){ if(res[d2.subject_id]){ res[d2.subject_id].subjectName = d2.subjectName } } console.log(res) }catch(e){ console.error(e) }finally{ setLoading(false) } }, []); Si desea mantener el result como una matriz, use esto
const [orderdetails, setOrderdetails] = useState([]); const [ordertracking, setOrdertracking] = useState([]); useEffect(async () => { try{ var res1 = await fetch('first api') var data1 = await res1.json() var res2 = await fetch('second api') var data2 = await res2.json() setOrderdetails(data1) setOrdertracking(data2) var res = [] for(let d1 of data1.content){ res.push({...d1,...data2.content.find(d2=>d2.subject_id==d1.subject_id)}) } console.log(res) }catch(e){ console.error(e) }finally{ setLoading(false) } }, []);Simplemente puede usar el bucle ForEach y el método Find para hacer eso ...
const res1 = { statusCode: '200', message: 'success', content: [ { subject_id: 711, topics: ['Test', 'Test2'] }, { subject_id: 712, topics: ['topic1', 'Topic2'] }, ], }; const res2 = { statusCode: '200', message: 'success', content: [ { subject_id: 711, subject_name: 'Science' }, { subject_id: 712, subject_name: 'Maths' }, ], }; let result = [ // { // subject_id: "711", // subjectName: "Science", // topics: [ "Test", "Test2" ] // }, // { // subject_id: "712", // subjectName: "Maths", // topics: [ "topic1", "Topic2" ] // } ]; res1.content.forEach((item) => { result.push({ subject_id: item.subject_id, topics: item.topics, subject_name: res2.content.find( (elem) => elem.subject_id == item.subject_id ).subject_name, }); }); console.log(result);