Getting json data using api

1. I have a two json object i need to merge those in a single object which has same id

Example

 const [orderdetails, setOrderdetails] = useState([]);
  const [ordertracking, setOrdertracking] = useState([]);
  
  useEffect(() => {
    fetch('https://l5tqeb0rof.execute-api.ap-south-1.amazonaws.com/dev/get/orderdetailsusingmobileno?mobileno=+917010779096')
      .then((response) => response.json())
      .then((json) => setOrderdetails(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    fetch('https://l5tqeb0rof.execute-api.ap-south-1.amazonaws.com/dev/get/ordertrackingdetailsusigmobileno?mobileno=+917010779096')
      .then((response) => response.json())
      .then((json) => setOrdertracking(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

Sample Data

First api response in orderdetails

{
    "statusCode": "200",
    "message": "success",
    "content": [
         { subject_id: 711, topics: ["Test", "Test2"] },
         { subject_id: 712, topics: ["topic1", "Topic2"] }
]
}

Second api response in ordertracking

{
        "statusCode": "200",
        "message": "success",
        "content": [
              {subject_id: 711, subject_name: "Science"},
               {subject_id: 712, subject_name: "Maths"}
    ]
    }

Expected output:

I want the merged result to be:

const result = [
  {
    subject_id: "711",
    subjectName: "Science",
    topics: [ "Test", "Test2" ]
  },
  {
    subject_id: "712",
    subjectName: "Maths",
    topics: [ "topic1", "Topic2" ]
  }
];

Description

!. As you can see there are two api response in a josn format I need to merge those json object which is inside a content which has same 'subject_id' and rest of the values as a single data.

Note

!. I need a solution in javascript for my react native app if you can suggest me a react native code

CodePudding user response：

I guess you are looking for this answer

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] };
  });

CodePudding user response：

I would suggest instead of making a result an array like this:

 const result = [
  {
    subject_id: "711",
    subjectName: "Science",
    topics: [ "Test", "Test2" ]
  },
  {
    subject_id: "712",
    subjectName: "Maths",
    topics: [ "topic1", "Topic2" ]
  }
];

You make it an object mapped with the subject_id:

 const result = {
  "711":{
    subjectName: "Science",
    topics: [ "Test", "Test2" ]
  },
  "712":{
    subjectName: "Maths",
    topics: [ "topic1", "Topic2" ]
  }
];

And your useEffect would be cleaner if you use async/await like this:

 const [orderdetails, setOrderdetails] = useState([]);
  const [ordertracking, setOrdertracking] = useState([]);
  
  useEffect(async () => {
   try{
    var res1 = await fetch('https://l5tqeb0rof.execute-api.ap-south-1.amazonaws.com/dev/get/orderdetailsusingmobileno?mobileno=+917010779096')
    var data1 = await res1.json()
    var res2 = await fetch('https://l5tqeb0rof.execute-api.ap-south-1.amazonaws.com/dev/get/ordertrackingdetailsusigmobileno?mobileno=+917010779096')
    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)
   }
  }, []);

If you want to keep result an array use this

 const [orderdetails, setOrderdetails] = useState([]);
  const [ordertracking, setOrdertracking] = useState([]);
  
  useEffect(async () => {
   try{
    var res1 = await fetch('https://l5tqeb0rof.execute-api.ap-south-1.amazonaws.com/dev/get/orderdetailsusingmobileno?mobileno=+917010779096')
    var data1 = await res1.json()
    var res2 = await fetch('https://l5tqeb0rof.execute-api.ap-south-1.amazonaws.com/dev/get/ordertrackingdetailsusigmobileno?mobileno=+917010779096')
    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)
   }
  }, []);