Q: I'm looking for some guidance regarding the best way to convert a .csv file into a list of divs in a specific format. Currently, I have parsed the data and created the format, however, I need some assistance with placing the data from .csv rows into the specified html areas in bold.
E: This is what the HTML format looks like and the CSV has about 325 rows of content as following - Page Links | Image Links | Title | Main Authors | Category | Year
<hr><div grid-row="" grid-pad="2" grid-gutter="4" grid-responsive=""><div grid-col="x8" grid-pad="2" class="list-img"><img style="width: 100%;" src="img-link" /></div><div grid-col="x8" grid-pad="2"><div style="text-align: left;"><b>Title</b></div></div><div grid-col="x8" grid-pad="2"><div style="text-align: left;">Authors</div></div><div grid-col="x8" grid-pad="2" class=""><div style="text-align: left;">Category</div></div><div grid-col="x8" grid-pad="2" class=""><div style="text-align: left;">Year</div></div></div>
R: So far I have been able to parse it into table view using CSV to HTML Table, however, I am having trouble formatting the export into the format above.
Any ideas or thoughts are welcome. Thanks in advance.
I was able to figure it out!
I ended up converting the file to a .json and gave each row a unique id# or key value pair. After the file was in .json format and properly parsed, I then created a react application, copied over the html format that I listed above and used the map method.
For ever section that I wanted the unique data to be inserted I used the map method to insert the data by stating {item.name}, this allowed me to pull every element from the json file.
import React from 'react'
import Data from './data.json'
export default function ListItem() {
return (
<div>
{ Data.map( item => {
return(
<div key={item.id}>
<hr/>
<div grid-row="" grid-pad="2" grid-gutter="4" grid-responsive="">
<div grid-col="x8" grid-pad="2" class="list-img">
<a href={item.pLinks} rel="history">
<img src={item.iLinks} />
</a>
</div>
<div grid-col="x8" grid-pad="2">
<div class="list-spacing">
<b>{item.Title}</b>
</div>
</div>
<div grid-col="x8" grid-pad="2">
<div class="list-spacing">
{item.Author}
</div>
</div>
<div grid-col="x8" grid-pad="2" class="">
<div class="list-spacing">
{item.Category}
</div>
</div>
<div grid-col="x8" grid-pad="2" class="">
<div class="list-spacing">
{item.Year}
</div>
</div>
</div>
</div>
)
}) }
</div>
)
}
Once I had the proper format and object.children in place I ran the react application and copied the entire html div.
I hope this helps anyone working with cargo or simple html website builders.
Related
I want to integrate ACE into my flask website and grab the information from it.
<form method="POST" action="" enctype="multipart/form-data">
{{form.hidden_tag()}}
<div class="row">
<div class="col-6">
<!-- Screenshot example 1:--> <div **id="editor"** **name="code"**>{{form.example_code}}</div>
<!-- Screenshot example 2:--> <!--<textarea class="code" name="code">{{form.example_code}}</textarea>-->
</div>
<div class="col-6">
{{Output_of_rendered_code}}
</div>
</div>
<div class="row">
<div class="field-group mt-4">
{{form.submit(class='btn btn-primary')}}
</div>
</div>
</form>
The issue is, that the name-tag "code" shows in the compiled div, not in the textarea. Even more, the text is not included in the textarea, but put into multiple span-tags, to allow for the color coding. See rendered Website as example. In contrast, when I use a simple textarea, the Website works fine...
Do you have any idea on how to use ACE and still get the information easily (e.g., by using the API to add the name to the respective tags)? Or alternatively, if you know a different editor which is easier to use.
Any support is highly appreciated.
Thanks a lot!
Niko
Can I add div contents (innerText / textContent) after adding a div in the parent class using JavaScript. I know it's confusing and also I am not sure whether my demand is correct or not.
Can someone just help how to achieve below HTML results using JS.
<div class="container">
<div class="mesg left">
<div class="username">
You
</div>
The main content goes here
<span id="time">08:23am</span>
</div>
</div>
I had tried to achieve this but I my case the content comes up... Like(see the output html from what I have did from JS)
<div class="container">
<div class="description">
The main content goes here
<div class="name">
James
</div>
<span id="time">08:23am</span>
</div>
</div
You can use Node.insertBefore to place the text before the timestamp.
Given your HTML this would work:
const time = document.getElementById("time")
const content = document.createElement("p")
content.innerText = "The main content goes here"
document.getElemenstByClassName("mesg left")[0]
.insertBefore(content, time)
I am trying to implement nested drag and drop functionality in angular project. For this I am using https://www.npmjs.com/package/ng-drag-drop.
HTML:
<ul>
<li class="parent" draggable [dragScope]="'parentLayout'">Row with Tow Columns</li>
</ul>
<div droppable [dropScope]="'parentLayout'" [dragOverClass]="'drag-target-border'" (onDrop)="onLayoutDrop($event)">
<div class="layout-container">Add Element Container Here</div>
</div>
Inside the 'layout-container' I want to drag and drop another HTML code. which is:
<div class="container">
<div class="row">
<div class="col-6" droppable [dropScope]="'element'">Column A - Add Element</div>
<div class="col-6" droppable [dropScope]="'element'">Column B - Add Element</div>
</div>
</div>
As you can notice, I want to enable second droppable div inside parent div. This works perfectly when I hardcoded the code. However, I want to fetch the code from database. So I tried using innerHTML, but its not detecting the ng-drag-drop scopes (droppable, [dropScope], etc).
.ts
inner_html: string = '';
// Fetched from database
layout: any = `<div class="container">
<div class="row">
<div class="col-6" droppable [dropScope]="'element'">Column A - Add Element</div>
<div class="col-6" droppable [dropScope]="'element'">Column B - Add Element</div>
</div>
</div>`;
innerElement: string = `<h1>Final Element</h1>`; // This is fetched from database
onLayoutDrop(){
this.inner_html += this.layout;
}
.html
<ul>
<li class="parent" draggable [dragScope]="'parentLayout'">Row with Tow Columns</li>
</ul>
<div droppable [dropScope]="'parentLayout'" [dragOverClass]="'drag-target-border'" (onDrop)="onLayoutDrop($event)">
<div class="layout-container">Add Element Container Here</div>
</div>
<div class="innerhtml" [innerHTML]="layout"></div>
Hey I hope you have the possibility to change your data that is fetched from the api. I really hope you get a proper model in JSON format and do not get some rigged HTML from your backend.
Because:
The data persistence should not know how the data is presented
HTML in the Database is a security flaw
With innerHtml you are working around angulars change detection
My advice: If it feels quirky to implement, it usually is quirky to implement.
So to a solution for your very problem:
Separate Data from Layout:
export interface SomeElement {
description: string;
}
Use *ngFor
<div class="container">
<div class="row">
<div class="col-6" droppable [dropScope]="'element'" *ngFor="let element of elementsFromDb">{{ element.description }}</div>
</div>
</div>
fetch data
elementsFromDb: SomeElement = /* fetch an array that looks like this [{ description: 'Column A - Add Element' }, { description: 'Column B - Add Element'}] */
I am using cheerio to extract text node from the html file.
can somebody please guide me if there is any way one can extract tooltip text using cheerio? i.e.
scenario 1:
<div class="row" style="padding-bottom: 5px;" uib-tooltip="this is tooltip text">
this is text
</div>
scenario 2:
<div class="row" style="padding-bottom: 5px;" uib-tooltip="this is inner tooltip text">
<div class="row" style="padding-bottom: 5px;" uib-tooltip="this is inner tooltip text">
this is enclosed text
</div>
</div>
the attached screenshot shows the json object which cheerio provides on parsing html
What i understood from your question is that you want innerHTML of an element which has uib-tooltip attribute.
So, you can just use $('[uib-tooltip]').html() to get the innerHTML, or any other selecter which suits your requirement.
That's an attribute, therefore:
$('.row').attr('uib-tooltip')
I have a card to store data for website (though not sure if it is best way to implement image with data) . Like this:
enter code here<div class="row">
<div class="thumbnail">
<img height="auto align-self-strech col-xs-3" class="card-img-top" src="http://1.bp.blogspot.com/-Ex9nL9iB34E/Tf8gTFiGqdI/AAAAAAAAE1A/lx8E4lYwVR0/s1600/Ahoban++by+Habib+Wahid+album+2011.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">আহ্বান - হাবীব</h5>
<p class="card-text">হাবীবের নতুন একক এলবাম</p>
দেখুন
</div>
</div>
</div>
<div class="thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFgR41SZX2C-ovvvfCZ7mwqzPvyj6Q8CMhZ31yjaKLIoPUj-Ss7A">
<div class="card-body">
<h5 class="card-title">বেষ্ট অফ মিনার</h5>
<p class="card-text">গান বাংলা থেকে প্রকাশিত মিনারের একক এলবাম</p>
দেখুন
</div>
</div>
</div>
How to insert them in a array in javascript to interact with database ? Currently I am using Mongodb.
Also, do I have to make an empty card with class images, name etc. to be pushed by database ?
If I understand it correctly you want to create a card in HTML and fill it with data from your database. This can be done in numerous ways, including manually. But I recommend you to use a framework for this. Such as ReactJS, VueJS, Angular or something like that.
You create the template you want to fill and use the framework to call that template and fill it with data. The database should not matter.