I have a site where some basic information is outpout in a javscript. I don't have access to the server side of things - and I wonder if I could use jQuery/Vanilla JS to create a DOM element with the value from that script?
The script looks like this:
var retailerData = {
"del": {
"zip": "",
"city": ""
},
"user": {
"country": "Denmark",
"phone": "0000",
"nbrOrders": 0,
"name": "John doe",
"salesPerson": "Frederik Jensen",
"customerNo": "5464564564",
"email": "Johndoe#test.dk"
},
"order": {
"shippingSum": 0.0,
"orderno": "",
"voucher": "",
"currency": "",
"orderVat": 0.0,
"orderSum": 0.0,
"items": []
}
}
Small Example:
var retailerData = {"del":{"zip":"","city":""},"user":{"country":"Denmark","phone":"0000","nbrOrders":0,"name":"John doe","salesPerson":"Frederik Jensen","customerNo":"5464564564","email":"Johndoe#test.dk"},"order":{"shippingSum":0.0,"orderno":"","voucher":"","currency":"","orderVat":0.0,"orderSum":0.0,"items":[]}}
var mainDiv = document.createElement("DIV");
var text1 = document.createTextNode("User Details");
var countryDiv = document.createElement("DIV");
var text2 = document.createTextNode("Country:");
var text3 = document.createTextNode(retailerData.user.country);
countryDiv.appendChild(text2)
countryDiv.appendChild(text3)
mainDiv.appendChild(text1);
mainDiv.appendChild(countryDiv);
document.body.appendChild(mainDiv);
Creating DOM-elements is pretty straight forward, it is just very explicit and will take some getting used to.
In its most basic use you need three methods:
createElement: creates an element (e.g. <div>)
createTextNode: creates text content for use in elements
appendChild: add a DOM-Node (such as an element or text) to another node
Creating new elements is always a document operation (oversimplification: the document is the HTML-tree of a webpage). So you always use document.create*, while the actual appending of those elements is done through the elements that should contain those newly created elements.
Now that I've mentioned these native DOM methods, lets put them to use and create an unordered list containing all user information.
var retailerData = {
"del": {
"zip": "",
"city": ""
},
"user": {
"country": "Denmark",
"phone": "0000",
"nbrOrders": 0,
"name": "John doe",
"salesPerson": "Frederik Jensen",
"customerNo": "5464564564",
"email": "Johndoe#test.dk"
},
"order": {
"shippingSum": 0.0,
"orderno": "",
"voucher": "",
"currency": "",
"orderVat": 0.0,
"orderSum": 0.0,
"items": []
}
}
// create an <ul> element and add it to the <body>
var ul = document.body.appendChild(document.createElement('ul')),
key, li;
for (key in retailerData.user) {
// create a <li> element and add it to the <ul>
li = ul.appendChild(document.createElement('li'));
// create a <span>, which is added to the <li> and immediately put text
// into it (appendChild returns the appended child), this practice is
// known as 'chaining'
li.appendChild(document.createElement('span'))
.appendChild(document.createTextNode(key));
// now add the value to the <li>, it will end up after the <span> we
// created above
li.appendChild(document.createTextNode(retailerData.user[key]));
}
li span {
display: inline-block;
width: 8em;
font-style: italic;
}
var ul = document.body.appendChild(document.createElement('ul')),
key, li;
for (key in retailerData.user) {
li = ul.appendChild(document.createElement('li'));
li.appendChild(document.createElement('span'))
.appendChild(document.createTextNode(key));
li.appendChild(document.createTextNode(retailerData.user[key]));
}
The above snippet as working fiddle
In jQuery, the syntax is more convenient (this is one of the reasons it has become so popular)
var $ul = $('body').append('<ul>');
$.each(retailerData.user, function(key, value) {
$ul.append('<li><span>' + key + '</span>' + value + '</li>');
});
A working fiddle demonstrating jQuery.
Related
I have urls like this:
data:
{
"zip": 442,
"code": "AG",
"capital": "london",
"currency": {
"code": "XCD",
"name": "East"
"link": "https://en.wikipedia.org/wiki/",
"url": "https://en.wikipedia.org/"
}
I want to write an if statement that checks if the object starts with a 'https:' and then tell it what to do.
This is what I have, but it doesn't make my urls clickable or returns its data.
if (jsonObject.startsWith("http://")) {
const text = document.createElement("a");
k.textContent = jsonObject;
k.setAttribute("href", jsonObject);
j.appendChild(k);
You're close I believe, you just aren't accessing the actual values inside of the object.
If you want to check the Object's properties values and if they start with http/https you can loop through the object and use the same check.
jsonObject.values.forEach((value) => {
if(value.startsWith("https://") {
const text = document.createElement("a");
k.textContent = value;
k.setAttribute("href", value);
j.appendChild(k);
}
});
Disclaimer: I know some Java but almost nothing about Javascript and have about 2 days to fix someone else's issues, of which this is one small part.
I have a nested array. I know the shop number, but need to get an array of only the parts in that shop.
"shops": [
{
"shopID": "15231",
"city": "Anytown",
"state": "MO",
"inventory": [
{
"description": "filter",
"partnumber": "MGL57047",
"shelf": "Z",
},
{
"description": "filter",
"partnumber": "84060",
"shelf": "A",
}
},
{
"shopID": "15232",
"city": "Springfield",
"state": "IL",
"inventory": [
{
"description": "filter",
"partnumber": "MGL57048",
"shelf": "B",
},
{
"description": "filter",
"partnumber": "84061",
"shelf": "A",
}
}
Here's what I tried:
const enteredShopID = '15231' // This isn't hard-coded in my app.
// Pull the list of all consumables for the current shop
var currentShop = application.data.shops.filter(s => s.shopID == enteredShopID)
This gets me an array with the shop and all of the inventory for that shop, but I need an array of the inventory. I tried
var currentShop = application.data.shops.inventory.filter(s => s.shopID == enteredShopID)
but that didn't work. Really, I'm just fumbling here. Is there a way to make the latter statement work, and somehow refer to the shopID of the parent?
Just use map() after the filter.
var currentShop = application.data.shops
.filter(s => s.shopID == enteredShopID)[0]
// checking if the current shop is actually null because no shops matched the ID
var currentShopInventory = (currentShop || {}).inventory || []
or use find()
// Note: If you use find(), there's a chance that there is no matching object
// So you'll have to check for that before you access the "inventory" key
// Otherwise you'll get "Cannot access 'inventory' of null"
var matchingShop = application.data.shops
.find(s => s.shopID == enteredShopID)
// Doing the checking here using an "or" if the matchingShop is null
var currentShop = matchingShop || {}
var currentShopInventory = currentShop.inventory || []
What I have to do is filter the array and write selected elements in the new one. Previously I saw two possible ways, but thanks to comments bellow I realised that way with deleting elements from array is not good. So what I need to do is to copy some elements (i.e. everything with category "science") to new one. My first question is: which approach is better? more efficient? Thank you for your help!
Now second question. How can I copy elements from my array to the new one? It was not a problem to copy only a book name form element with id 0. But when I was trying to copy id, name, category, price and image is exactly the same form to the new array the attempt failed...
My array is:
var products =
[
{
"id": "0",
"name": "Book Name",
"category": "science",
"price": "$49,99",
"image": "img/product-1.png"
},
{
"id": "1",
"name": "Book Name 2",
"category": "computers",
"price": "$319",
"image": "img/product-2.png"
},
{
"id": "2",
"name": "Book Name 3",
"category": ["science", "programming", "computers"],
"price": "$49,99",
"image": "img/product-1.png"
}
]
below I tried to remove mismatched elements, but this approach turned out to be less effective and more problematic.
let checkedOperations = 'programming';
let selected_products = [... products];
$(document).ready(function () {
for (var i in products) {
if (isTrue(checkedOperations, products[i].category)) {
selected_products.splice(i,1);
}
console.log('selected products after slice -1 = ' + selected_products[1].name);
console.log('selected products after slice = ' + selected_products[2].name);
console.log('selected products after slice +1 = ' + selected_products[3].name);
}
});
Using forEach should do the trick without handling indexes and thus making it less error-prone.
let resArray = []; // Filtered result array
products.forEach((el) => {
if (el.id === "0") { // Whatever condition you want
resArray.push(el);
}
})
My first question here, sorry in advance for any mistake...
I'm developing a mapbox web for my own pleasure, featuring photos taked by myself in a map. Info is loaded in JSON files, with this structure:
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-8.5375900268555,42.881175994873]
},
"properties": {
"title": "Graffiti",
"description": "",
"image": {
"imageSize": [1024, 768], "imageLandscape": 1, "imageUrl": "imgs/gsa_2016_files/20160805173018_OLY_PEP3_P8052307.jpg" },
"icon": {
"iconSize": [96, 73],
"iconUrl": "imgs/gsa_2016_files/thumb_20160805173018_OLY_PEP3_P8052307.jpg"
},
"extended_info": {
"tags": "graffitis,nomada",
"place": "europa,españa,galicia,santiago de compostela"
},
"time": "2016:08:05 17:30:18",
"year": 2016,
"month": 8,
"day": 5
}
}
I work with different JSON files for each map, which are loaded this way:
var map = new mapboxgl.Map({ blah, blah... });
var layerIds = [ '2016' ];
var layerColors = [ 'rgba(255,0,0,1)' ];
function add_sources_to_map()
{
for (var i = 0; i < layerIds.length; i++) {
var id = layerIds[i];
var layerId = layerIdPrefix + id;
var geoJsonFile = 'jsons/'+ id + '.geoJSON';
map.addSource(layerId, { type: 'geojson', data: geoJsonFile });
}
}
Later on I use a function to filter elements by year:
function filterByYear(year) {
var filterFullYear = [ '==', 'year', year];
// Aplica os filtros nas capas
for (var i = 0; i < layerIds.length; i++) {
var id = layerIds[i];
map.setFilter(id, filterFullYear);
}
}
But I would like to do some more filtering, by part of tags or place content. For example, anyone with a "tag" which contains "nomada", or any "place" with "europe". I have tried to do it but failed miserably, although my knowledge of mapbox-gl or even js is limited. Can this be done? Should I change my JSON structure? Can anybody point me to some help?
TIA!
This is not supported in Mapbox-GL-JS. The issue is being tracked here: https://github.com/mapbox/mapbox-gl-js/issues/4698
May be you can help me:
My functions:
getMyUsers : function(callback){ /*- get users every 5 seconds*/
...
...
success: function(r) {
var users = [];
for(var i=0; i< r.users.length;i++){
if(r.users[i]){
users.push(render('user',r.users[i]));
}
}
jQuery('#chatUsers').append(users.join(''));
}
url: 'path/handler.php?action=getusers';
}
This function get my users from the server. It comes as json string like:
{
"users": [{
"name": "username_temp",
"last_activity": "16:29:16",
"gravatar": "thumb_1546278d532ea4c1cddc7a4b.jpg",
"status": "",
"usertype": "M",
"typing": "0"
}, {
"name": "admin",
"last_activity": "16:29:16",
"gravatar": "thumb_7d41870512afee28b70d5d91.jpg",
"status": "",
"usertype": "M",
"typing": "0"
}],
"total": "2"
}
render: function(template,params){
switch(template){
case "user";
arr = ['<div class="user" id="user-',params.name,'">',params.name,'</div>'];
break;
}
return arr.join('');
}
My HTML container:
<div id="chatUsers"></div>
How should I change my functions to:
Remove (filter) user(s) from my div container if it not comes in the string.
If my user already in the container skip.
If this is a new user just append it to the container.
Thanks a lot!
As I understand, you want to remove users from the DIV if they're not in the JSON; you want to skip adding them if they are in the JSON; and you want to append them if they're not in the DIV.
Well, why not just replace the contents of the DIV instead of appending to it?
jQuery('#chatUsers').html(users.join(''));