json parse isse with nested response reactjs

Question

I am trying to parse a json response

[{
"province": "abc",
"county": "aa",
"timeline": {
    "cases": {
        "4/11/20": 4,
        "4/12/20": 5
    },
    "recover": {
        "4/11/20": 0,
        "4/12/20": 1
    }
}
}]

Although I am able to get "county" value but I am not able to go into timline data.Its either giving me undefined issue or giving [obejct Object] as log. Below I my code.

parseTimeLineData(resData)
  {
   let  timeLine = [];
    resData.map(data =>
    {
     let dd = data.timeline;
      Object.keys(dd).map((key, i) => {
      var one = {key}
      alert(one);
      var value = dd[key]
      })
    });  
  }

My requirement is to parse the cases and recover nodes and save them in separate array to be used further. Also need to know how to only fetch first index values out of a big array.

"or giving [obejct Object] as log", because the value in your function is an object? — devserkan
– devserkan, Commented May 12, 2020 at 1:57
So how could I parse the inner most val and fetch key and value from it. — kshitij
– kshitij, Commented May 12, 2020 at 2:04
What is the shape of your desired data? How will you use it? Please provide this information. You can update your question. — devserkan
– devserkan, Commented May 12, 2020 at 2:21
@devserkan I guess below I got the answer. I am new to react, so not familier with many functions it has. like JSON. stringify — kshitij
– kshitij, Commented May 12, 2020 at 2:29
This is not related to React, JSON.stringify belongs to JS. If I'm not mistaken with the provided answer you get an array of array, which I think is not the desired output. — devserkan
– devserkan, Commented May 12, 2020 at 2:42

Guru Hadadi · Accepted Answer · 2020-05-12 02:04:21Z

2

Use JSON.stringify

[{
"province": "abc",
"county": "aa",
"timeline": {
    "cases": {
        "4/11/20": 4,
        "4/12/20": 5
    },
    "recover": {
        "4/11/20": 0,
        "4/12/20": 1
    }
}
}].map(data => Object.keys(data.timeline).map(item => alert(JSON.stringify(data.timeline[item]))))

answered May 12, 2020 at 2:04

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kshitij Over a year ago

its giving me values now.Thanks.. I am new to react. So I dont know much about JSON.stringify() it solves the issue.

kshitij Over a year ago

Sorry I got to know srtringify is only to see the result. We can use it for getting and fetching vals.

devserkan · Accepted Answer · 2020-05-12 05:42:02Z

I'm still not quite sure how do you want those arrays since you haven't provided a concrete example. So, I'm blindly guessing that there will be other objects in your data and somehow you want to accumulate cases and recover values somehow, then use those in the future. So, here is an example of reduce:

const data = [
  {
    province: "abc",
    county: "aa",
    timeline: {
      cases: {
        "4/11/20": 4,
        "4/12/20": 5,
      },
      recover: {
        "4/11/20": 0,
        "4/12/20": 1,
      },
    },
  },
  {
    province: "xyz",
    county: "bb",
    timeline: {
      cases: {
        "4/13/20": 40,
        "4/14/20": 50,
      },
      recover: {
        "4/13/20": 10,
        "4/14/20": 5,
      },
    },
  },
];

function parseTimeLineData(resData) {
  return resData.reduce((acc, data) => {
    const newCases = Object.entries(
      data.timeline.cases
    ).map(([key, value]) => ({ [key]: value }));

    const newRecovers = Object.entries(
      data.timeline.recover
    ).map(([key, value]) => ({ [key]: value }));

    acc.cases = !acc.cases ? newCases : [...acc.cases, ...newCases];
    acc.recover = !acc.recover ? newRecovers : [...acc.recover, ...newRecovers];

    return acc;
  }, {});
}

const reducedValues = parseTimeLineData(data);
console.log(reducedValues);

I'm not quite sure if this is the structure you want but I am dropping this as an example.

Collectives™ on Stack Overflow

json parse isse with nested response reactjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related