Dynamically creating a json in react-native

Question

I know that this kind of question is asked before like this & this. from these SO Question I arrived at this code. Trust me am new into React Native and Javascript. I have two troubles 1. I need to get data like this

[
  {
"title": {
  "StudentName": "DIYA",
  "studentId": "00002",
  "name": "DIYA",
  "parentName": "BIJU V",
  "dob": "18 Dec 2009",
  "image": "234567890"
},
"member": [
  {
    "title": "DIYA",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "TUTION FEE",
    "amount": "85.000"
  },
  {
    "title": "DIYA",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "BUS FEE",
    "amount": "50.000"
  }
]
  },
  {
    "title": {
      "StudentName": "PONNU",
      "studentId": "00003",
  "name": "PONNU",
  "parentName": "BIJU V",
  "dob": "17 Oct 2009",
  "image": "234567890"
},
"member": [
  {
    "title": "PONNU",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "TUTION FEE",
    "amount": "90.000"
  },
  {
    "title": "PONNU",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "BUS FEE",
    "amount": "55.000"
  }
]
  }]

but what I get is

[
  {
"title": {
  "StudentName": "PONNU",
  "studentId": "00003",
  "name": "PONNU",
  "parentName": "BIJU V",
  "dob": "17 Oct 2009",
  "image": "234567890"
},
"member": [
  {
    "title": "DIYA",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "TUTION FEE",
    "amount": "85.000"
  },
  {
    "title": "DIYA",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "BUS FEE",
    "amount": "50.000"
  },
  {
    "title": "PONNU",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "TUTION FEE",
    "amount": "90.000"
  },
  {
    "title": "PONNU",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "BUS FEE",
    "amount": "55.000"
  }
]
  },
  {
"title": {
  "StudentName": "PONNU",
  "studentId": "00003",
  "name": "PONNU",
  "parentName": "BIJU V",
  "dob": "17 Oct 2009",
  "image": "234567890"
},
"member": [
  {
    "title": "DIYA",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "TUTION FEE",
    "amount": "85.000"
  },
  {
    "title": "DIYA",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "BUS FEE",
    "amount": "50.000"
  },
  {
    "title": "PONNU",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "TUTION FEE",
    "amount": "90.000"
  },
  {
    "title": "PONNU",
    "date": "31 Aug 2108",
    "month": "Apr",
    "type": "BUS FEE",
    "amount": "55.000"
  }
]
  }
 ]

I have two apis response which need to be combined to form as the first json. But I doesn't seem to work out as expected the second json is the output got `

 var studentsDetailJson = [];

var eachItem = {
  title: {},
  member: []
};

this.state.data.map((stuItem) => {

  eachItem.title = {
    "StudentName": stuItem.StudentName,
    "studentId": stuItem.StudentID,
    "name": stuItem.StudentName,
    "parentName": stuItem.FatherName,
    "dob": stuItem.DOB,
    "image": "234567890"
  };
  console.log("stu" + JSON.stringify(stuItem));

  this.state.feesDetails.map((feesItem) => {

    if (stuItem.StudentName === feesItem.StudentName) {
      // console.log("fees" + JSON.stringify(feesItem))
      eachItem.member.push({
        "title": feesItem.StudentName,
        "date": feesItem.FeeDueDate,
        "month": "Apr",
        "type": feesItem.FeeDescription,
        "amount": feesItem.FeeAmount
      });
    }

  });
  console.log("eachitem.title" + JSON.stringify(eachItem.title))
  studentsDetailJson.push(eachItem);

});
  console.log("feeitem"+JSON.stringify(studentsDetailJson))
  this.setState({
     processedData : (studentsDetailJson),
     hasData : true
   });

`

Under the student name I need to get only that student details. but am getting both students data. Also its showing same student name in second json item in son array(see second json response) I don't know whats wrong. Pls help.

EDIT 1

I just noticed that after first iteration on this.state.data my son response looks like this `

    [
  {
    "title": {
      "StudentName": "DIYA",
      "studentId": "00002",
      "name": "DIYA",
      "parentName": "BIJU V",
      "dob": "18 Dec 2009",
      "image": "234567890"
    },
    "member": [
      {
        "title": "DIYA",
        "date": "31 Aug 2108",
        "month": "Apr",
        "type": "TUTION FEE",
        "amount": "85.000"
      },
      {
        "title": "DIYA",
        "date": "31 Aug 2108",
        "month": "Apr",
        "type": "BUS FEE",
        "amount": "50.000"
      }
    ]
  }
]

`

after the next iteration it looks like the output json mentioned above

ISSUE RESOLVED

leaving solution as it might help someone sometime.

I modified my code below `

var studentsDetailJson = [];
this.state.data.map((stuItem) => {
  var eachItem = {
    title: {},
    member: []
  };  
  eachItem.title = {
    "StudentName": stuItem.StudentName,
    "studentId": stuItem.StudentID,
    "name": stuItem.StudentName,
    "parentName": stuItem.FatherName,
    "dob": stuItem.DOB,
    "image": "234567890"
  };
  //console.log("stu" + JSON.stringify(stu));
  this.state.feesDetails.map((feesItem) => {

    if (stuItem.StudentName === feesItem.StudentName) {

       console.log("fees" + JSON.stringify(stuItem.StudentName))
      eachItem.member.push({
        "title": feesItem.StudentName,
        "date": feesItem.FeeDueDate,
        "month": "Apr",
        "type": feesItem.FeeDescription,
        "amount": feesItem.FeeAmount
      });
    }

  });
  studentsDetailJson.push(eachItem);

`

Thanks in Advance

score 2 · Answer 1 · answered Oct 07 '18 at 16:43

You are pushing details to eachItem.member.

eachItem.member = this.state.feesDetails.map((feesItem) => {
    if (stuItem.StudentName === feesItem.StudentName) {
      // console.log("fees" + JSON.stringify(feesItem))
      return {
        "title": feesItem.StudentName,
        "date": feesItem.FeeDueDate,
        "month": "Apr",
        "type": feesItem.FeeDescription,
        "amount": feesItem.FeeAmount
      });
    }
  });

This could be one of solution. But I suggest rethinking using temp variable since I guess we are mutating the temp variable.

but doesn't it need to omit name other than current name. there is 2 students as of now. during the first iteration at this.state.data the response is correct (please see my edit 1) and when the second iteration comes the response totally changes — suja, Oct 07 '18 at 16:51

Dynamically creating a json in react-native

1 Answers1