how to display/differentiate data from json response

Question

I have following dynamic response in JSON, so I have one list object and I want to display and differentiate data using form_id. please tell me how to achieve this...

//list object
formsSummery: any = [];

this.formsSummery = (data[0] as any).data_points;

   [ {
  "job" : 10,
  "data_points" : [ {
    "user_id" : 11,
    "ingest_time" : "2017-09-26T13:17:33.489Z",
    "form_id" : 2,
    "form_revision" : 1,
    "device_id" : 0,
    "field1" : "2.2",
    "field2" : "two",
    "field3" : "2",
    "field4" : "1"
  }, {
    "user_id" : 11,
    "ingest_time" : "2017-09-26T13:03:56.757Z",
    "form_id" : 7,
    "form_revision" : 1,
    "device_id" : 0,
    "field1" : "thirteen",
    "field2" : "fourteen",
    "field3" : "fifteen",
    "field4" : "sixteen"
  }, {
    "user_id" : 11,
    "ingest_time" : "2017-09-27T11:58:59.735Z",
    "form_id" : 7,
    "form_revision" : 1,
    "device_id" : 0,
    "field1" : "17",
    "field2" : "TWENTY",
    "field3" : "19",
    "field4" : "1",
    "field5master" : "EIGHTEEN",
    "field6" : "TRUE"
  }, {
    "user_id" : 11,
    "ingest_time" : "2017-09-26T07:23:26.468Z",
    "form_id" : 7,
    "form_revision" : 1,
    "device_id" : 0,
    "field1" : "five",
    "field2" : "seven",
    "field3" : "six",
    "field4" : "eight"
  }, {
    "user_id" : 11,
    "ingest_time" : "2017-09-26T07:24:14.729Z",
    "form_id" : 7,
    "form_revision" : 1,
    "device_id" : 0,
    "field1" : "nine",
    "field2" : "eleven",
    "field3" : "ten",
    "field4" : "twele"
  }, {
    "user_id" : 11,
    "ingest_time" : "2017-09-26T08:29:36.728Z",
    "form_id" : 2,
    "form_revision" : 1,
    "device_id" : 0,
    "field1" : "2.1",
    "field2" : "one",
    "field3" : "1",
    "field4" : "true"
  }, {
    "user_id" : 11,
    "ingest_time" : "2017-09-26T07:18:10.401Z",
    "form_id" : 7,
    "form_revision" : 1,
    "device_id" : 0,
    "field1" : "one",
    "field2" : "three",
    "field3" : "two",
    "field4" : "four"
  }, {
    "user_id" : 11,
    "ingest_time" : "2017-09-27T11:57:06.188Z",
    "form_id" : 2,
    "form_revision" : 1,
    "device_id" : 0,
    "field1" : "2.3",
    "field2" : "THREE",
    "field3" : "3",
    "field4" : "TRUE"
  } ]
} ]

I want to display data using form_id. I want to display data in the table using form_id (all arrays for form_d=7 in one table) like this, and a number of table = number of form ids.

What exactly do you mean by _I want to display and differentiate data using form_id._ ? Do you want to filter your data? Under what criteria? — bazzells, Sep 26 '17 at 17:41
But if there are multiple objects with the same `form_id`, what do you want to happen to your data? Do you want to keep the newest object, keep the oldest object, something else ... ? — bazzells, Sep 26 '17 at 17:45
And when you say newest object, you're referring to the `ingest_time`, right? This would be much easier if your data were ordered by date. I would suggest starting there, then using `Array.prototype.filter` — bazzells, Sep 26 '17 at 17:53
Yes ingest_time! thanks! can you please provide some code for this — Rahul, Sep 26 '17 at 17:57

score 0 · Accepted Answer · edited Sep 26 '17 at 18:53

0

I would suggest first ordering your data_points array, with something like this post. Then use a Set to keep track of the form_id's in your array. As you filter, if the form_id is already in your Set, you'll ignore it.

Example:

let x = new Set();
const y = this.formsSummery[0].data_points.filter(z => {
  return !x.has(z.form_id) ? x.add(z.form_id) : null
})

So if !x.has(z.form_id) evaluates to true, x.add(z.form_id) will be returned, which will also evaluate to true - and the desired object will be added to your filtered array.

enter image description here

edited Sep 26 '17 at 18:53

Rahul

69
1
1
9

answered Sep 26 '17 at 18:07

bazzells

329
2
8

Actually, I am getting EXCEPTION: Cannot read property 'filter' of undefined – Rahul Sep 26 '17 at 18:40
Ok, so accessing the array is slightly off. Can you post the entire response object? Maybe a screenshot of a console.log? – bazzells Sep 26 '17 at 18:42
It looks like your response has been _stringified_. Try creating a variable: `const obj = JSON.parse(response)`. Then do your filtering on the new variable. – bazzells Sep 26 '17 at 18:55
See attached picture – Rahul Sep 26 '17 at 18:56
if I used like this const y = JSON.parse(response[0] as any).data_points.filter theh EXCEPTION: Unexpected token o in JSON at position 1 – Rahul Sep 26 '17 at 19:05
Now, I got like this: x data:{} current-activity.component.ts:523 y data:[{"user_id":11,"ingest_time":"2017-09-26T13:17:33.489Z","form_id":2,"form_revision":1,"device_id":0,"field1":"2.2","field2":"two","field3":"2","field4":"1"},{"user_id":11,"ingest_time":"2017-09-26T13:03:56.757Z","form_id":7,"form_revision":1,"device_id":0,"field1":"thirteen","field2":"fourteen","field3":"fifteen","field4":"sixteen"}] – Rahul Sep 26 '17 at 19:09
And that's what you were looking for, right? Your original form_ids were 2 & 7. Those objects have the newest `ingest_time` among all the objects. – bazzells Sep 26 '17 at 19:12
Yes! This is exactly I looking ...Thanks a lot @bazzells – Rahul Sep 26 '17 at 19:16
Nice, glad it worked. Would you mind accepting the answer? – bazzells Sep 26 '17 at 19:35
My one problem is solved! Next, I want to display data in the table using form_id (all arrays for form_d=7 in one table) like this, and a number of table = number of form ids. – Rahul Sep 27 '17 at 14:12
Is it possible? or not – Rahul Sep 27 '17 at 14:13
You could start with your array of objects created previously. Then create an object that has a key for each form_id, like this: const baseObj = y.reduce((obj, cur) => obj[form_id] = !obj.hasOwnProperty(cur.form_id) ? [] : obj[form_id], {}). Here, baseObj would be something like: {2:[], 7:[]}. Then, do a reduce on formsSummery and populate those empty arrays with the objects for that form_id. const tables = formsSummery[0].data_points.reduce((obj,cur) => { obj[cur.form_id].push(cur); return obj; }, baseObj); . Note: this isn't tested but should be a good starting point. – bazzells Sep 27 '17 at 14:45
Rough draft ^, could possibly do in one pass, but a starting point nonetheless. – bazzells Sep 27 '17 at 14:48
I have tried this but I got empty baseObj. could you please provide some working code for this.Please! – Rahul Sep 28 '17 at 11:17
HI @bazzells please help me one more time...Please – Rahul Oct 02 '17 at 10:47

score 0 · Answer 2 · answered Sep 26 '17 at 19:04

 var ret = 0
    function filter(filterId) {
      data = formsSummery[0].data_points;
      for (i in data) {
        if (data[i].form_id == filterId) {

          if (ret != 0 && (new Date(data[i].ingest_time).getTime()) >= (new Date(ret.ingest_time).getTime())) {
            ret = (data[i]);
          }
          else {
            ret = (data[i])
          }
        }
      }
      return ret;
    }
    var result = filter(2) //your filter id 
    console.log(result)

not sure about date time

how to display/differentiate data from json response

2 Answers2