My problem is the following: I'm trying to refactor a website and to replace all strings into some variables so when I change a variable it changes across the whole website. However, here comes the issue:
I have data in multiple Json files and I get it like so with gulp:
var locals = {
// Content
someContent: require('../data/content-path.json'),
someOtherContent: require('../data/other-content-path.json'),
};
gulp.task('jade:pages', function() {
return gulp.src(pages)
.pipe(plumber())
.pipe(jade({
locals: locals
})
.on('error', notify.onError({
title: 'Jade Error',
message: '<%= error.message %>'
})))
.pipe(gulp.dest('dist'));
});
So I can easily access any key from Jade like so #{someContent.key1}.
However, if I want to use some key from my someContent in my someOtherContent it renders it as a string (not parsing a variable).
someContent
{
"key1" : {
"subkey1": "5",
"subkey2": "9"
},
"key2":"<p>Some markup which parsed as html if desirable</p>",
}
someOtherContent
{
"title": "#{someContent.key1.subkey1} some other text"
}
So it works perfectly if I just use it directly in Jade, but it can't parse such a reference if I use it as #{someOtherContent.title}, and it outputs exactly
"#{someContent.key1.subkey1} some other text"
when I want it to output this instead
"5 some other text"
What could I do here to make it work? Any help is really appreciated.
Thank you everyone.
Related
I want to able create many identical blocks with different data. For exaple list of items with different names and values.
So I have a pug file like this:
- var data = require("data.json")
mixin item(name,val)
.item
.item-name= name
.item-val= val
mixin items(input)
each itm in input
+item(itm.name,itm.value)
+items(data)
And my JSON file data.json like this:
[
{
"name" : "item1",
"value": "100"
},
{
"name" : "item2",
"value": "200"
},
{
"name" : "item3",
"value": "500"
}
]
Also I want to load different json data and use it with my items mixin to build different blocks
But gulp didn't compile this code and throw error "write after end" on my pug file
I also added some code with "locals" for my gulp taks:
gulp.task('site:pug:pages', function() {
var settings = Config.getTaskSettings('site:pug:pages');
return gulp.src(BASE_PATH + settings.source)
// return gulp.src("./html/**/*.pug")
.pipe(plumber({
errorHandler: notify.onError()
}))
.pipe(pug({pretty: true,locals: {
require: require
}}))
.pipe(gulp.dest(DEST_PATH + settings.dist))
.pipe(global.browserSync.stream());
});
But this didn't help.
A know that I can pass json data from gulp task. But there are 2 issues:
I don't want to pass these json at gulp task because if I have new file I should write it at gulp task file.
This also didn't work and throw the same "write after end" error
Is there a easy way to use JSON data at pug templates
I'm using parcel to do the job.
First get the json file on the pug.config.js file(if you don`t know about this config file look here)
const dataFile = require("./data.json");
module.exports = {
locals: {
dataVariable: dataFile,
}
};
Then for exemple on a index.pug I use an each loop to display the ID's included in the someData array inside my JSON file:
each data in dataVariable.someData
li= data.ID
data.json file used.
{
"someData": [
{
"ID": "xrHLZ",
},
{
"ID": "ar23D",
}
]
}
I am trying to transpile my ES6 code via Babel, I am using the next/babel preset along with preset-env and I'm using the browsers: defaults target.
The NextJS preset comes with #babel/plugin-proposal-object-rest-spread in its plugins array, I'm wondering why I am getting an error when testing on edge that says Expected identifier, string or number, and when looking in the compiled JS for the error, I see it happens when {...t} occurs.
Here is my babel.config.js:
module.exports = {
presets: [
[
'next/babel',
{
'#babel/preset-env': {
targets: {
browsers: 'defaults'
},
useBuiltIns: 'usage'
}
}
]
],
plugins: [
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
['styled-components', { ssr: true, displayName: true, preprocess: false }],
[
'module-resolver',
{
root: ['.', './src']
}
]
],
env: {
development: {
compact: false
}
}
};
Any help on this would be greatly appreciated!
In the end my problem was related to a package that was not being transpiled by babel. My solution was to use NextJS' next-transpile-modules plugin to get babel to transpile the package code into something that would work on the browsers I need.
Here's an example of my NextJS webpack config with the package I need transpiled specified:
const withTM = require('next-transpile-modules');
module.exports = withTM({
transpileModules: ['swipe-listener']
});
SCRIPT1028: Expected identifier, string or number error can occur in 2 situations.
(1) This error get trigger if you are using trailing comma after your last property in a JavaScript object.
Example:
var message = {
title: 'Login Unsuccessful',
};
(2) This error get trigger if you are using a JavaScript reserved word as a property name.
Example:
var message = {
class: 'error'
};
solution is to pass the class property value as a string. You will need to use bracket notation, however, to call the property in your script.
Reference:
ERROR : SCRIPT1028: Expected identifier, string or number
I am wondering if there is a way to get a cleaner JSON with just the docs out of Couchdb instead of getting it under "rows" and then "doc"
This is the default output
{
"total_rows":1,
"offset":0,
"rows":[
{
"id":"7d9fd5824f9029186c1eec1bda005e75",
"key":"7d9fd5824f9029186c1eec1bda005e75",
"value":{
"rev":"1-f99879f67cfd27685f92c884c236a0fd"
},
"doc":{
"_id":"7d9fd5824f9029186c1eec1bda005e75",
"_rev":"1-f99879f67cfd27685f92c884c236a0fd",
"title":"Hello World",
"messeges":"This is the first messege. Helloo there"
}
}
]
}
This is the desired output:
{
"_id":"7d9fd5824f9029186c1eec1bda005e75",
"_rev":"1-f99879f67cfd27685f92c884c236a0fd",
"title":"Hello World",
"messeges":"This is the first messege. Helloo there"
}
Thanks
It would be useful to see your code. I suspect this is the output of the alldocs api? If you know the ID of the document you want you can use the get api which returns the JSON you want. Otherwise you must loop through the "rows" ie
for (x in results.rows) {...}
and then use x.doc to get your JSON.
Thanks all for the help.
I figured out a way doing it in Node js by using a map function attached to there query
in the nano page they listed it as
alice.list().then((body) => {
body.rows.forEach((doc) => {
console.log(doc);
});
});
instead I used it like this
alice.list().then((body) => {
var result = body.rows.map( (x) => {
return x.doc
});
console.log(result);
});
which works for me.
Still new till couchdb and databases in general.
In the following code I am getting data from server and filling array with them:
Vue.http.post('/dbdata', DataBody).then((response) => {
App.$refs.userContent.rasters_previews_list.$set(response); // putting JSON answer to Component data in userContent
console.log("App.$refs.userContent.rasters_previews_list: ", App.$refs.userContent.rasters_previews_list.length);
}, (response) => {
console.log("Error")
});
Now I am filling. data is declared in var userContent = Vue.extend({. I am using App.$refs.userContent.rasters_previews_list to set it's value, because one man from SO said that there is no other way to get access to constructor. I tried to do output of rasters_previews_list after changing with watch, but here is what I am see. http://img.ctrlv.in/img/16/08/04/57a326e39c1a4.png I really do not understand am I setting it's right way or no. If yes, why I do not see data and see only this crap?
data: function () {
return {
rasters_previews_list: []
}
}
But How I can iterate it with v-for?
<ul v-for="img in rasters_previews_list">
<li>{{img}}</li>
<ul>
This code is display one bullet. So it's look like it's assume that there is one object.
My object in browser console look like:
Object {request: Object, data: Array[10], status: 200, statusText: "OK", ok: true}
Your setting the full response instead of just the data you actually need.
Vue.http.post('/dbdata', DataBody).then((response) => {
App.$refs.userContent.rasters_previews_list.$set(response.data);
console.log("App.$refs.userContent.rasters_previews_list: ", App.$refs.userContent.rasters_previews_list.length);
}, (response) => {
console.log("Error")
});
If this isn't what you are looking for please post a full example.
First time attempted ractive and got errors. [Object object] printed repeatedly.
Tried to merge both files into one (problem is that the collection and ad are different so how to combine both?)
Advertisements and non-advertisements would be printed out respectively, meaning advertisement items should be printed out first in freewall layout and after that, non-ad items will be printed out.
Somewhere in code i might have gone wrong.
Ractive Template
<script id="thumbnail-tmpl" type="text/ractive">
{{items}}
{{#if advertised}}
<div class="thumb">
<span class="thumb-caption">
{{title}}
<small>{{subtitle}}</small>
</span>
</div>
{{else}}
<div class="thumb">
<span class="thumb-caption">
{{title}}
<small>{{subtitle}}</small>
</span>
</div>
{{/#if advertised}}
{{items}}
</script>
Script
<script>
;(function() {
var finalObj = $.merge(collections, ad);
$.getJSON(finalObj)
.then(function(response){
new Ractive({
el: document.querySelector('[data-freewall]'),
template: '#thumbnail-tmpl',
data:{
items: response,
advertised: response.advertised
}
})
});
})();
</script>
HTML
<div data-freewall></div>
How to combine two json into one? They will be two different files so will pull json from files later.
Advertised is not working for conditional to print ad and non-ad items. Tried tutorial conditional on ractive website..
Is it possible to print ad items first then non-ad items second before laying them out in freewall layout (in case if you don't know what freewall is, http://vnjs.net/www/project/freewall/?
help will be appreciated.
Updated: Still have problems
Keep on seeing test message -
[object Object],success,[object Object],[object Object],success,[object Object]
Also {{/if}} and {{/each}} are giving illegal errors
$.when(
$.getJSON('pathto/test/collection.json'),
$.getJSON('pathto/test/ad.json')
).then(function(collections, advertised){
var items = collections.concat(advertised);
alert(items);
items.sort(function(a, b){
if(a.advertised){
return b.advertised ? 0 : -1;
}
else{
return b.advertised ? 1 : 0;
}
});
var ractive = new Ractive({
el: document.querySelector('[data-freewall]'),
template: '#thumbnail-tmpl',
data:{
items: items
}
});
});
In json files from two urls
{
"advertised": [
{ "title": "Rabbit",
"subtitle": "Nibble",
"advertised": true
},
{ "title": "Dog",
"subtitle": "Woof",
"advertised": true
},
{ "title": "Cat",
"subtitle": "Purr",
"advertised": true
}
]
}
{
"collections": [
{ "title": "Horse",
"subtitle": "Na~~",
"advertised": false
},
{ "title": "Turkey",
"subtitle": "Gobble",
"advertised": false
},
{ "title": "Goat",
"subtitle": "Baaaa",
"advertised": false
},
{ "title": "Snake",
"subtitle": "hissssss",
"advertised": false
}
]
}
Still not seeing anything display on the page - show blank even if errors are corrected. I am wondering if the json files are a reason -- because we can't access to collection and advertised in json files?
Help please and appreciate it
The reason you're getting [object Object] is that you're trying to print {{items}} directly - use {{#each items}}...{{/each}} instead (or just {{#items}}...{{/items}} if you prefer the compact syntax). There's also an error with {{/#if advertised}} - use {{/if}} instead.
The easiest way to combine data from two different JSON files, if you're using jQuery AJAX, is probably to nest the callbacks...
$.getJSON('path/to/collections.json').then(function (collections) {
$.getJSON('path/to/advertised.json').then(function (advertised) {
// code goes here
});
});
...though it would be more ideal to use deferreds so that you can fetch the files in parallel:
$.when(
$.getJSON('path/to/collections.json'),
$.getJSON('path/to/advertised.json')
).then( function ( a, b ) {
var collections = a[0].collections, advertised = b[0].advertised;
// code goes here
});
Now for the code to combine the two arrays. You don't need to use jQuery for this, since you're just concatenating two arrays:
var items = collections.concat( advertised );
You can sort them however you like using items.sort(sortFunction). Feed that into your Ractive instance, and everything works as expected (there's an example sort function there).
Once you've done that, you can use the freewall plugin on the container element.