Skip to content

Instantly share code, notes, and snippets.

View YannMjl's full-sized avatar
💭
Learning is experience; everything else is just information!

Yann Mulonda YannMjl

💭
Learning is experience; everything else is just information!
View GitHub Profile
import { Component } from '@angular/core';
import demodata from '../assets/demo.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'read-json-demo';
declare module "*.json" {
const value: any;
export default value;
}
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" href="https://twitter.com/YannMjl" target="blank" title="Twitter">
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 8px 0;
html, body {
overflow: scroll;
overflow-x: hidden;
height: fit-content;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
/* make scrollbar transparent */
@YannMjl
YannMjl / index.html
Last active September 13, 2019 16:52
html file for reading CSV to JSON demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSV-Excel 2 JSON Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/css/mdb.min.css"/>
@YannMjl
YannMjl / script.js
Created September 12, 2019 22:23
script for reading CSV to JSON demo
// *********************************************************************************************************************
// Global variables *
// difine global variables that will be use throughout the code *
// *********************************************************************************************************************
var csv_file_API = './UsersSample.csv';
// Do some stuff when page hmtl page is launched
$(document).ready(function () {
$("#headerTitle").hide(300).show(1500);
FIRST NAME LAST NAME EMAIL ADDRESS PHONE NUMBER CITY STATE
Frank Riley [email protected] 123-456-7890 New York New York
Steve Brannigan [email protected] 123-456-1290 San Francisco California
Marie Ambrose [email protected] 123-976-7890 Dallas Texas
Yann Mulonda [email protected] 321-854-5842 Minneapolis Minnesota
Chris Martins [email protected] 123-654-8542 Seattle Washington
// read csv file and convert to json format
$.ajax({
type: 'GET',
url: csv_file_API,
dataType: 'text',
error: function (e) {
// read Excel file and convert to json format using fetch
fetch('./soccer_players.xlsx').then(function (res) {
/* get the data as a Blob */
if (!res.ok) throw new Error("fetch failed");
return res.arrayBuffer();
})
.then(function (ab) {
/* parse the data when it is received */
var data = new Uint8Array(ab);
var workbook = XLSX.read(data, {