在react-native中动态创建json

时间:2018-10-07 16:13:05

标签: javascript reactjs react-native

我知道这类问题是像thisthis这样问过的。从这些SO问题,我得出了这段代码。相信我是React Native和Javascript的新手。我有两个麻烦1.我需要获取这样的数据

[
  {
"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"
  }
]
  }]

但是我得到的是

[
  {
"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"
  }
]
  }
 ]

我有两个API响应,需要将它们组合起来以形成第一个json。但是我似乎没有像预期的那样工作,第二个json是输出得到`

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

`

在学生姓名下,我只需要获取该学生的详细信息。但是正在获取两个学生的数据。而且它在儿子数组的第二个json项目中显示相同的学生姓名(请参阅第二个json响应),我不知道怎么了。请帮助。

编辑1

我刚刚注意到,在对this.state.data进行第一次迭代之后,我的儿子响应看起来像这样`

    [
  {
    "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"
      }
    ]
  }
]

`

在下一次迭代之后,它看起来像上面提到的输出json

问题已解决

留下解决方案,因为它可能会在某个时候对某人有所帮助。

我在“

”下面修改了我的代码
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);

`

预先感谢

1 个答案:

答案 0 :(得分:1)

您正在将详细信息推送到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
      });
    }
  });

这可能是解决方案之一。但是我建议您重新考虑使用临时变量,因为我猜我们正在对临时变量进行变异。