Creating the necessary user interface using JSON data.Here are some steps to follow

Question

Creating the necessary user interface using JSON data.Here are some steps to follow

I am struggling to create a dynamic UI based on JSON data. The issue I'm facing is with looping through the data to generate the required elements.

My Goal: Achieving a Dynamic UI from Static Code

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;

// More CSS code here...

</code></pre>

// HTML and JavaScript code snippets here... 

</div>
</div>
</p>

<p><strong>Current Progress: Working on Dynamic Implementation</strong></p>

<p><div>
<div>
<pre class="lang-js"><code>// Some JavaScript code working on generating dynamic content based on JSON

var Data = {
  "Employ A": ["EmployA1.jpg", "EmployA2.jpg"],
  "Employ B": ["EmployB1.jpg"],
  "Employ C": ["EmployC1.jpg"]
}

// More JavaScript code here...

</code></pre>
<pre class="snippet-code-css lang-css"><code>.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;

// More CSS code here...

</code></pre>
<pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

// More HTML code snippets here...

</button>
</div>

Currently, I am experiencing difficulties as only one counter is being displayed instead of all in the .card-header div element. It shows as 'objext-object' instead of the actual values when populating the checkboxes.

javascript jquery html css

Answer 1

Answer №1

Your current nested loop is not functioning correctly. It's iterating over the same list of keys as seen in for key in Data. To access the array elements, you should iterate over Data[key].

Make sure to generate a new card-header and list-group for each iteration of the outer loop, where the employee name is placed within the card header. The inner loop then populates the list group with items from the arrays. Lastly, append all of this content to the .card DIV.

var Data = {
  "Employ A": ["EmployA1.jpg", "EmployA2.jpg"],
  "Employ B": ["EmployB1.jpg"],
  "Employ C": ["EmployC1.jpg"]
}

var counters = Object.keys(Data)

console.log(counters.length);
for (var key in Data) {
  var newCard = $(`<div>
      <div class="card-header"></div>
      <ul class="list-group list-group-flush">
      </ul>
    </div>`);
  var ul_innerhtml = "";
  console.log(key)
  $(".card-header", newCard).text(key);
  Data[key].forEach(d =>
    ul_innerhtml += '<li class="list-group-item">' + d + '<label class="switch "><input name="type" type="checkbox" class="success" value="' + d + '"><span class="slider round"> </span></label></li>'
  )
  $(".list-group", newCard).append(ul_innerhtml);
  $(".card").append(newCard.html());
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <div class="card" style="margin: 10px 0">
    </div>
  </div>
  <button id="btn-search" class="btn btn-default commonButton" type="submit">
<i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>

Answer 2

Your current nested loop is not functioning correctly. It's iterating over the same list of keys as seen in for key in Data. To access the array elements, you should iterate over Data[key].

Make sure to generate a new card-header and list-group for each iteration of the outer loop, where the employee name is placed within the card header. The inner loop then populates the list group with items from the arrays. Lastly, append all of this content to the .card DIV.

var Data = {
  "Employ A": ["EmployA1.jpg", "EmployA2.jpg"],
  "Employ B": ["EmployB1.jpg"],
  "Employ C": ["EmployC1.jpg"]
}

var counters = Object.keys(Data)

console.log(counters.length);
for (var key in Data) {
  var newCard = $(`<div>
      <div class="card-header"></div>
      <ul class="list-group list-group-flush">
      </ul>
    </div>`);
  var ul_innerhtml = "";
  console.log(key)
  $(".card-header", newCard).text(key);
  Data[key].forEach(d =>
    ul_innerhtml += '<li class="list-group-item">' + d + '<label class="switch "><input name="type" type="checkbox" class="success" value="' + d + '"><span class="slider round"> </span></label></li>'
  )
  $(".list-group", newCard).append(ul_innerhtml);
  $(".card").append(newCard.html());
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <div class="card" style="margin: 10px 0">
    </div>
  </div>
  <button id="btn-search" class="btn btn-default commonButton" type="submit">
<i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>

Creating the necessary user interface using JSON data.Here are some steps to follow

Answer №1

Similar questions

Retrieve the duplicated items from an array by comparing two specific properties in JavaScript

Modify the contents of an array within a string using JavaScript

Convert JSON object to a string representation

Is it possible to remove strings within HTML elements?

Is it possible to implement addEventListener.delay() functionality?

Exploring the Method of Accessing data-* Attributes in Vue.js

Creating a feature that uses a button press to initiate an Ajax request based on a specific identifier

What is the best way to integrate the express-session logic with Prisma for optimal performance?

Tips for concealing the image title when hovering over it

Interacting with a PHP script utilizing jQuery

Issue with React-select: custom Control prevents select components from rendering

Switch between using a dropdownlist and textbox depending on the selection in another dropdownlist

Is it feasible to use HTML to improve IE's tolerance for errors in markup, such as unnecessary tags?

For an optimal printing experience with Jqprint, it is recommended to utilize color output

Utilizing jQuery's Ajax functionality to extract filtered data from mySQL

Tips on retrieving the ul list value dynamically using jQuery when it changes

Making a jQuery post request that returns JSON data

Is there a way to prevent the background color from filling the entire container?

Audio in A-Frame does not function properly when in VR mode

Is it possible to submit a form using AJAX in WordPress without relying on WordPress functions?