Parse json array and loop through all the data for Pivot.js

Question

I have a json array data in this format:

{
  "jobs": [
    {
      "id": "some_random_id_1",
      "email": "[email protected]",
      "email_type": "html",
      "status": "pending",
      "job_fields": {
        "TITLE": "job title here"
      },
      "stats": {
        "applied": 40,
        "rejected": 20
      }
    },
    {
      "id": "some_random_id_2",
      "email": "[email protected]",
      "email_type": "html",
      "status": "pending",
      "job_fields": {
        "TITLE": "job title here"
      },
      "stats": {
        "applied": 30,
        "rejected": 20
      }
    },
    {
      "id": "some_random_id_3",
      "email": "[email protected]",
      "email_type": "html",
      "status": "pending",
      "job_fields": {
        "TITLE": "job title here"
      },
      "stats": {
        "applied": 13,
        "rejected": 1
      }
    },
    {
      "id": "some_random_id_4",
      "email": "[email protected]",
      "email_type": "html",
      "status": "pending",
      "job_fields": {
        "TITLE": "job title here"
      },
      "stats": {
        "applied": 13,
        "rejected": 1
      }
    }
  ],
  "job_id": "some_id",
  "total_jobs": 60
}

where I just need to access the jobs object and grab id and status and all info for job_fields and stats (or all info for now).

  // example is from here
  // https://pivottable.js.org/examples/mps.html
  $(function(){
    $.getJSON("data.json", function(mps) {
        $("#output").pivotUI(mps);
    });
 });

the example works with this json format:

[{
    "Province": "Quebec",
    "Party": "NDP",
    "Age": 22,
    "Name": "Liu, Laurin",
    "Gender": "Female"
  },
  {
    "Province": "Quebec",
    "Party": "Bloc Quebecois",
    "Age": 43,
    "Name": "Mourani, Maria",
    "Gender": "Female"
  },
  {
    "Province": "Ontario",
    "Party": "Conservative",
    "Age": "",
    "Name": "O'Toole, Erin",
    "Gender": "Male"
  }
]

I am not sure how to modify the javascript so it can read my json format. I can't modify the json format to match the above format, so in the above javascript example, province, party, etc are all passed to the function.

I want to do the same but with my json format, so output id, status, all members of job_fields (ex: TITLE, etc. ), all members of stats (ex: applied, rejected.

HMR · Accepted Answer · 2018-04-29 15:48:57Z

Assuming all jobs have job_fields.TITLE, stats.applied and stats.rejected maybe the following will do:

const json = {
  "jobs": [
    {
      "id": "some_random_id_1",
      "email": "[email protected]",
      "email_type": "html",
      "status": "pending",
      "job_fields": {
        "TITLE": "job title here"
      },
      "stats": {
        "applied": 40,
        "rejected": 20
      }
    },
    {
      "id": "some_random_id_2",
      "email": "[email protected]",
      "email_type": "html",
      "status": "pending",
      "job_fields": {
        "TITLE": "job title here"
      },
      "stats": {
        "applied": 30,
        "rejected": 20
      }
    },
    {
      "id": "some_random_id_3",
      "email": "[email protected]",
      "email_type": "html",
      "status": "pending",
      "job_fields": {
        "TITLE": "job title here"
      },
      "stats": {
        "applied": 13,
        "rejected": 1
      }
    },
    {
      "id": "some_random_id_4",
      "email": "[email protected]",
      "email_type": "html",
      "status": "pending",
      "job_fields": {
        "TITLE": "job title here"
      },
      "stats": {
        "applied": 13,
        "rejected": 1
      }
    }
  ],
  "job_id": "some_id",
  "total_jobs": 60
};

console.log(
  json.jobs.map(
    (job)=>({
      id:job.id,
      status:job.status,
      title:job.job_fields.TITLE,
      applied:job.stats.applied,
      rejected:job.stats.rejected
    })
  )
);

Eddie · Accepted Answer · 2018-04-29 16:12:35Z

0

You can use map and use Object.assign and spread operator to make an object

var obj={"jobs":[{"id":"some_random_id_1","email":"[email protected]","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":40,"rejected":20}},{"id":"some_random_id_2","email":"[email protected]","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":30,"rejected":20}},{"id":"some_random_id_3","email":"[email protected]","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":13,"rejected":1}},{"id":"some_random_id_4","email":"[email protected]","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":13,"rejected":1}}],"job_id":"some_id","total_jobs":60}

var result = obj.jobs.map(({id,status,job_fields,stats}) => {
  return Object.assign({}, {id}, {status}, {...job_fields}, {...stats});
});

console.log(result);

Or you can make it shorter like:

var result = obj.jobs.map( ({id,status,job_fields,stats}) => Object.assign({},{id},{status},{...job_fields},{...stats}) );

answered Apr 29, 2018 at 16:12

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

1 Comment

Eddie Over a year ago

Happy to help :)

Karthik S · Accepted Answer · 2018-04-29 15:51:45Z

0

Can try with below snippet:

$(function(){
$.getJSON("data.json", function(orgData) {
    var pivotData = [];
    orgData.jobs.forEach(function (job, ind) {
        var reqInfo = {};
        reqInfo['id'] = job.id;
        reqInfo['status'] = job.status;
        reqInfo['jobTitle'] = job.job_fields && job.job_fields.TITLE;
        reqInfo['applied'] = job.stats && job.stats.applied;
        reqInfo['rejected'] = job.stats && job.stats.rejected;
        pivotData.push(reqInfo)
    })
    $("#output").pivotUI(pivotData);
});

});

answered Apr 29, 2018 at 15:51

Karthik S

3132 silver badges7 bronze badges

2 Comments

user263291 Over a year ago

this works great thank you :) is it possible to dynamically populate the info assuming we dont know how many members stats has? for example what if stats has more members, similar to job_fields where some jobs have different job fields not just the title

Karthik S Over a year ago

Yes u can do it. Loop through job.stats and assign its property to reqInfo. If your using ES6, you can use spread operator on job.stats

4b0 · Accepted Answer · 2019-12-11 08:13:59Z

0

$("#output").pivotUI(mps.jobs);

edited Dec 11, 2019 at 8:13

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered Dec 11, 2019 at 7:36

guest

1

1 Comment

Core972 Over a year ago

Welcome on SO. Could you edit your answer to add some context. You can read this guide to write better answer.

Collectives™ on Stack Overflow

Parse json array and loop through all the data for Pivot.js

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related