Filtering JSON and appending data into cloned divs

I have some JSON data where each item (or “hiring position”) falls under a certain Title. Most of the positions are not filled (isFilled: false) and there are two of them that are filled and have names associated with them.

Each job title is housed within its own dynamically-created form/div, i.e. I have four unique job titles in my JSON which rendered four divs. I cloned each div from hard coded HTML.

The plan is to filter out the job positions that are not filled and append them to the correct places in their correct forms. The two positions that are filled should be appended in separate places in their respective forms.

I believe I should use a .filter and an if...else in my code, but I don’t want to screw up the functionality of cloning the divs. Where can I implement both?

Here’s a screenshot of one of the forms and here’s a JSFiddle that includes the HTML, CSS, and JS.

Note: I changed the names and words in the JSON for privacy purposes, so there are some discrepancies between the JSON sample in this question body and in the JS fiddle.

Snippet of jsonData.d.results:

    [
  {
    "Title": "AAA",
    "TitleGroup": [
      {
        "GoalRange": "3",
        "Office": "Office-A",
        "Role": "a",
        "Name": "No",
        "IsFilled": false,
        "isActive": true
      },
      {
        "GoalRange": "3",
        "Office": "Office-A",
        "Role": "a",
        "Name": "Bobson Dugnutt",
        "IsFilled": true,
        "isActive": false
      },
      {
        "GoalRange": "3",
        "Office": "Office-A",
        "Role": "a",
        "Name": "No",
        "IsFilled": false,
        "isActive": true
      }
    ]
  },

JS snippet:

import $ from 'jquery';
import jsonData from "./test.json";



function _displayForm() {

	/// Consolidates JSON so each Office, Role, etc. falls under the correct Job Title Group
	let titleKeyHolder = [];
	let titleArr = [];

	jsonData.d.results.forEach(function(item) {
		titleKeyHolder[item.Title] = titleKeyHolder[item.Title] || {};
		let obj = titleKeyHolder[item.Title];
		if(Object.keys(obj).length == 0)
			titleArr.push(obj);

		obj.Title = item.Title;
		obj.TitleGroup = obj.TitleGroup || [];

		obj.TitleGroup.push({ 
			GoalRange: item.GoalRange,
			Office:	   item.Office,
			Role:	   item.Role, 
			Name:	   item.Employee, 
			IsFilled:  item.IsFilled, 
			IsActive:  item.IsActive 
		});
	});
	
	console.log(JSON.stringify(titleArr))

	let jobTitle = titleArr
	
        // Clones the HTML div based on how many Titles are present
		jobTitle.forEach(val => {
			let $clonedDiv = $("#template").clone();
			$clonedDiv.removeAttr("id");

			$clonedDiv
				.find("#display-form-job-title")
				.append(val.Title);

			$clonedDiv
				.find("#tbody-hire")
				.append(`<td>${val.GoalRange}</td>`); 

			$clonedDiv
				.find("#filledRowBody")
				.append(
					`<td>${val.Employee}</td>
					 <td>${val.Role}</td>
					 <td>${val.Office}</td>
					 <td>${val.IsActive}</td>`
				);

			$clonedDiv // combining $clonedDiv .finds and .removes doesn't work
				.find("#display-form-job-title")
				.removeAttr("id");

			$clonedDiv
				.find("#filledRowBody")
				.removeAttr("id");

			$("#titleBody").append($clonedDiv);
		})
}

_displayForm();

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.