logo
down
shadow

display json data in bootstrap card using jquery


display json data in bootstrap card using jquery

By : Loska
Date : November 22 2020, 04:01 AM
Hope this helps You have 2 problems
id="userimg" id can be only one for one element $("#userimg").append($img); this will select the first one only
code :
 html +='<div class="col-md-4" id="userimg"> </div>'
html +='<div class="col-md-4 userimg" > </div>'
$("#userimg").append($img);
$(".userimg:eq("+i+")").append($img);
var vimg;
var data=[{"image" : "abc.png" , "para" : "Hi..iam rohit.and this 1st card"},{"image" : "sqr.png", "para" : "Hi..iam rakesh.and this 2st card"}]
var html = '<div class="col-md-12">';
html += '<div class="card">';
html += '<div class="row">';
html += '<div class="col-md-4 userimg"> </div>';
html += '<div class="col-md-8 px-3">';
html += '<div class="card-block px-3">';
html += '<h4 class="card-title">sometitle</h4>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';

for (var i = 0; i < data.length; i++) {
  $('#printcard').append(html);

  uimg = data[i].image;

  var $img = $("<img/>");
  $img.width('340px');
  $img.height('220px');
  $img.attr("src", "data:image/png;base64," + uimg);
  $(".userimg:eq("+i+")").append($img);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="printcard">  

</div>


Share : facebook icon twitter icon
display data in bootstrap card from web service call

display data in bootstrap card from web service call


By : Harun
Date : March 29 2020, 07:55 AM
This might help you Not the cleanest way but I was able to retrieve the JSON data and display it on the card.
code :
<div class="card" id="card-data">
  <div class="front">
     <h1 id="data_number"></h1> 
   </div>
</div>
$(document).ready( function () {
    var data = $.getJSON("http://localhost:8080/xxxxxxx/getData", function(data) {
        $("#data_number").html(data[0].number);
    });
});
While clicking flex card, open a new page and display the parsed data with style in javascript / jquery

While clicking flex card, open a new page and display the parsed data with style in javascript / jquery


By : stivenp
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Since you are going to open a new window you will lost the stylesheet, so you must write it in your document as follow :
code :
function clickFunction(recipes){  

    let myWindow = window.open("","Preview");
    
   
    myWindow.document.open();
     myWindow.document.write('<head>')
     myWindow.document.write('<link rel="stylesheet" href="yourstyle.css">');
          
     myWindow.document.write('</head><body>')

    myWindow.document.write('<br>Name:'+recipes.name+'<br>');
    myWindow.document.write("<table><tr><th>Name</th><th>Amount</th></tr> </table>");
    for(var i=0; i < recipes.Ingredients.length; i++){
        var name = recipes.Ingredients[i].name;
        var amount = recipes.Ingredients[i].amount;
        myWindow.document.write("<table><tr><td>"+name+"</td><td>"+amount+"</td></tr></table>");
    }
    myWindow.document.write('<br>Steps:'+recipes.steps+'<br>');
    myWindow.document.write('<br>Similar Cuisines:'+recipes.SimilarCuisines+'<br>'); 
         myWindow.document.write('</body>')

    myWindow.document.close();
   }


$(function(){
    var $container = $('.container');
    $.ajax({
        type:'GET',
        dataType: 'json',
        url:'https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json',
        success: function (data) {
            //console.log(data.recipes);
            var htmlContent="";
       //          htmlContent+='<head>';
     //htmlContent+='<link rel="stylesheet" href="style.css">';
          
     // htmlContent+='</head><body>';
            for (var i=0; i<data.recipes.length;i++) {
                var recipe = data.recipes[i];

  htmlContent += "<div class=\"card\" onclick='clickFunction("+JSON.stringify(data.recipes[i])+")'>";
                htmlContent += "<h1>";
                htmlContent += data.recipes[i].name
                htmlContent += "</h1>";
                htmlContent += "</div>";
            }
           //  htmlContent+='</body>'
            document.getElementById("recipebody").innerHTML = htmlContent; 
        }
    });
});
*{
    box-sizing: border-box;
}
body{
    background: url('cutlery.jpg');  
}
#root{
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.container{
    display: flex;
    flex-wrap: wrap;  
    position: relative;
    padding:10px;
}
h1 {
    text-align: center;
    background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
    font-size: 1.5rem;
    padding: 1rem 2rem;
    color: white;
}
.card {
    margin:5px;    
    background: white;
    box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
    border-radius: 12px;
    overflow: hidden;
    grid-gap:20px;
}
.card:hover {
    box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
    transform: translate3D(0, -2px, 0);
}
@media screen and (min-width: 600px) {
    .card{
        flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 900px) {
    .card{
        flex: 1 1 calc(33% - 2rem);
  }
}
.card:nth-child(2n) h1 {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.card:nth-child(4n) h1 {
    background-image: linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%);
}

.card:nth-child(5n) h1 {
    background-image: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%);
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div id="root">
    <h1>List of Recipies</h1>
    <div class="container" id="recipebody">
    </div>
</div>

</body>
Bootstrap card as button to display data

Bootstrap card as button to display data


By : user1771094
Date : March 29 2020, 07:55 AM
To fix the issue you can do I have a custom checkbox, I have added a text, and I want the text to be align right side of a check box , , Move the text outside the label field like below.
code :
<label for="checkOther"></label>Testing check-box
/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}
 
     <div class="squaredThree">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other"  >
      <label for="checkOther"></label>Testing check-box
    </div>  
 .squaredThree label:before {
     content: 'Testing check-box';
     position: absolute;
     top: 4px;
     left: 30px;
     white-space:nowrap;
     background: transparent;
 } 
/* .squaredThree */
.squaredThree {
  position: relative;
  float:left;
  margin: 10px
}

.squaredThree label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #D7B1D7;
  border-radius: 4px; 
}

.squaredThree label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.squaredThree label:hover::after {
  opacity: 0.3;
}

.squaredThree input[type=checkbox] {
  visibility: hidden;
}

.squaredThree input[type=checkbox]:checked + label:after {
  opacity: 1;
}
/* end .squaredThree */

.label-text {
  position: relative;
  left: 10px;
}
 
.squaredThree label:before {
  content: 'Testing check-box';
  position: absolute;
  top: 4px;
  left: 30px;
  white-space:nowrap;
  background: transparent;
  } 
     <div class="squaredThree">
      <input type="checkbox" name="optionsRadios" id="checkOther" value="other"  >
      <label for="checkOther"></label>
    </div>  
React JSON - Display data in a Card Slider

React JSON - Display data in a Card Slider


By : Prabhat Kumar
Date : March 29 2020, 07:55 AM
Hope this helps Since you are looking for a simpler way to achieve the same result I would suggest switching your App to a stateless component, as it is never updating/using any state value :
code :
import React from "react";
import CardData from "./data/db";
import "./App.css";

const App = props => (
    <React.Fragment> //A fragment will not appear in your DOM
        {CardData.map(({ title, subtitle }, index) => ( //Deconstructs each cards
            <div className="card" key={index}>
                <span>{title}</span>
                <br />
                <span>{subtitle}</span>
                <br />
            </div>
        ))}
    </React.Fragment>
)

export default App;
import React from "react";
import "./App.css";

const App = ({ cards }) => (
    <React.Fragment>
        {cards.map(({ title, subtitle }, index) => (
            <div className="card" key={index}>
                <span>{title}</span>
                <br />
                <span>{subtitle}</span>
                <br />
            </div>
        ))}
    </React.Fragment>
)

export default App;
import CardData from "./data/db";

const Parent = props => <App cards={CardData}/>
How to add JSON data to the card and display to the end user

How to add JSON data to the card and display to the end user


By : Abdirahman Ali
Date : March 29 2020, 07:55 AM
will help you Since the data {Data: {…}} is Object, you should not use it as Array data[0].
The structure of data is {Data: value}, so you should retrieve Data by var realData = data.Data;
code :
    $.ajax({
        type: 'post',
        url: 'http://34.201.147.118:3001/getData',
        data: JSON.stringify(SendInfo),
        contentType: "application/json",
        traditional: true,
        success: function (data) {
            console.log(data);
            var realData = data.Data;
            console.log(realData);
            setData(realData);

        }
    });
function setData(data){
    $('.card b').text(data.AcquiringDivision);
    // ...and so on    
}
Related Posts Related Posts :
  • function not called after a change event
  • How to set a PHP session value as selected onclick on a drop down list
  • scrollIntoView does not include border
  • Javascript number comparison not correct
  • how to fix google map center location in vue js
  • Replace integer in a for loop with string
  • Replace nested JavaScript Object data item with dynamically created path?
  • Cannot remove item from shopping cart in React Redux reducer
  • How to import all images from a folder in ReactJS?
  • How to enforce Webpack 4 to detect and recompile only files that were changed
  • How to use arrow functions with main class 'this' properties?
  • Dynamically decide which Fetch response method to use
  • SVGRenderer with OrbitControls shows two SVG elements on opposite sides
  • JS nesting problem, variable comes back unidentified any way
  • An Alternative to <script> tag if resource don't get loaded
  • Javascript for loop behaviour in arrays
  • How to display two web content on same browser alternatively on click without reloading it?
  • How to call function inside the inner.html
  • React progress bar with each click
  • Copy text to clipboard from hidden input is not working in jQuery
  • How to populate all the array values to a single index in javascript
  • Checkbox input staying checked?
  • Change string on each loop iteration
  • React Native Fetch Requests are not getting sent to my Node Js backend for some users
  • jQuery Validation Add Method Regex Number with Parentheses
  • Do something if element equals value and is checked
  • What prevents abuse of Firebase's createUserWithEmailAndPassword?
  • Karma + Jasmine (Angular Testing): Where should I define mock classes and test variables?
  • Call() method fails to generate output in javascript
  • Obj iteration dynamically - javascript
  • How to convert nested array to normal array and change types?
  • Javascript copy to clipboard only works if I have a breakpoint
  • Changing global variable by user input via function
  • different CSS style class on page load for mobile and desktop
  • JavaScript - Daterangepicker, isInvalidDate method enabling only one day
  • Javascript, Jquery: get element by two attr?
  • JavaScript colour changer doesn't work properly
  • Stop next execution of Rxjs observer?
  • Remove rules required from an input date
  • Format text input value with javascript
  • jQuery closest() in .this element is not working
  • Connect to postgresdb using typescript from nodejs server
  • MarkerWIthLabel maps library: this.setValue is not a function
  • Wrap all elements inside a specific div using JS (JQ works)
  • how to append data using ajax posts and datatables are not working?
  • Reactive Angular Material Data Table
  • How to update styles on child component onPress in react native
  • Grouping javascript array items based on their properties with AngularJS
  • Simplify nested if/else with repeated results?
  • Can we map over two arrays at same time in js?
  • How to send javascript values as params without backslash
  • Remove parent div class if child div has a specific value
  • Rewrite actionscript to javascript
  • Show alert message if value not selected in dropdown in jquery
  • How to get path directory from FileReader()?
  • how to pick different API calls depending on the drop down option
  • Redirect to URL after form submit in React
  • Javascript array displays twice
  • Moving an element smoothly to its new position without manually setting its position
  • Vue.js, Router importing template vue file
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org