json – devfrontend.info

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

21/12/2021 / admin

Source: Accessing nested JavaScript objects and arrays by string path et demo.

Mon chemin dynamique était, par exemple, de ce type: const combinedPath = buildPath( $_THIS ) + "." + matchingThreshold;. Le problème venait du fait qu’il n’était pas interprété par javascript comme un chemin mais comme une chaîne de caractères (un console.log m’affichait quelque chose d’aplati du style: priceTable.<=2.size[0].100 au lieu de m’afficher la valeur stockée dans l’objet priceTable qui correspondait au chemin <=2.size[0].100).

Afin que le chemin construit dynamiquement via javascript ne soit pas interprété comme une chaîne de caractères, nous pouvons utiliser la fonction suivante:

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Object.byString = function(o, s) {

s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties

s = s.replace(/^\./, ''); // strip a leading dot

var a = s.split('.');

for (var i = 0, n = a.length; i < n; ++i) {

var k = a[i];

if (k in o) {

o = o[k];

} else {

return;

}

return o;

}

Utilisation:

Object.byString(someObj, 'part3[0].name');

1	Object.byString(someObj, 'part3[0].name');

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

27/05/2021 / admin

Source: Set twig variable to json file as an include.

Fichier _data/test.json:

{ "name":"John", "age":30, "car":null }

1	{ "name":"John", "age":30, "car":null }

Fichier template.twig:

{% set json %}
    {% include "_data/test.json" %}
{% endset %}

[...]

<h1>{{ json }}</h1>

{% set json %}

{% include "_data/test.json" %}

{% endset %}

[...]

[AngularJS] Utiliser un filtre pour récupérer le nombre de clés contenues dans un objet JSON.

03/04/2019 / admin

Source JS du filtre:

// Is there a way to count the number of keys in a json object directly in angular expressions?
// https://stackoverflow.com/questions/33520317/is-there-a-way-to-count-the-number-of-keys-in-a-json-object-directly-in-angular

app.filter('numKeys', function() {
  return function(json) {
    var keys = Object.keys(json)
    return keys.length;
  }
});

// Is there a way to count the number of keys in a json object directly in angular expressions?

// https://stackoverflow.com/questions/33520317/is-there-a-way-to-count-the-number-of-keys-in-a-json-object-directly-in-angular

app.filter('numKeys', function() {

return function(json) {

var keys = Object.keys(json)

return keys.length;

}

});

Utilisation qui en est faite dans le template:

Pour l’objet JSON lineData.details.config, numKeys me donne le nombre d’items présents dans l’objet.

  <td>
    <span style="color: red; font-weight: bold;">{{lineData.details.config | numKeys}}</span>
  </td>
  <td ng-repeat="(id, config) in lineData.details.config" class="td-nobor" ng-init="resultCode=config.resultCode;stockMessage=config.stockMessage">
    [...]
  </td>

<td>

<span style="color: red; font-weight: bold;">{{lineData.details.config | numKeys}}</span>

</td>

[...]

</td>

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

31/03/2017 / admin

Sources :

Doc officielle à propos des fichiers externes de configuration au format JSON : Gulp recipes – Using external config file
M’a donné la solution : Gulp Minify & Concat Javascript
M’ont seulement mis sur la voie : Javascript: get package.json data in gulpfile.js, How To Keep Your Gulp Configuration Options In A JSON File
How to Simplify Your Development Workflow with Gulp

Problématique :

Ce message laissé sur Stack Overflow. J’utilise Gulp pour minifier 2 types bien distincts de fichiers JS :

L’ensemble des fichiers JS stockés dans un dossier ./src/js qui sont des plugins custom écrits spécifiquement pour les besoins du projet ou des vendor (ou « third-party ») plugins surchargés et modifiés spécifiquement pour les besoins du projets.

Une sélection de fichiers JS stockés dans un dossier ./src/vendor/[...] qui sont des vendor plugins que je souhaite utiliser en l’état, sans les modifier (composant Bootstrap, Modernizr, ou autre…).

J’utilise un fichier de configuration externe gulpconf.json pour (notamment) constituer une liste de chemins vers les third-party plugins que je souhaite ajouter aux sources de mon projet. Ce fichier ressemble à ceci :

{
  "js" : {
    "vendor" : [
      "./src/vendor/browser-detection/src/browser-detection.js",
      "./src/vendor/foundation/js/foundation.js",
      "./src/vendor/modernizr/lib/metadata.js",
      "./src/vendor/jquery-mobile/js/events/navigate.js",
      "./src/vendor/jquery-mobile/js/events/touch.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js"
    ]
  }
}

{

"js" : {

"vendor" : [

"./src/vendor/browser-detection/src/browser-detection.js",

"./src/vendor/foundation/js/foundation.js",

"./src/vendor/modernizr/lib/metadata.js",

"./src/vendor/jquery-mobile/js/events/navigate.js",

"./src/vendor/jquery-mobile/js/events/touch.js",

"./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js",

"./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js",

"./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js"

]

}

Le problème est que lorsque je lance ma tâche gulp watch, des modifications (typiquement, l’ajout d’un chemin vers un nouveau vendor plugin que je souhaite ajouter à mon projet) sont détectées dans mon fichier de config mais elles ne sont pas appliquées. Exemple des logs que j’obtiens :

[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed
[09:26:53] Starting 'clear_vendor_cache'...
[09:26:53] Finished 'clear_vendor_cache' after 1.56 ms
[09:26:53] Starting 'js'...
[09:26:53] Finished 'js' after 4.67 ms

[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed

[09:26:53] Starting 'clear_vendor_cache'...

[09:26:53] Finished 'clear_vendor_cache' after 1.56 ms

[09:26:53] Starting 'js'...

[09:26:53] Finished 'js' after 4.67 ms

Solution :

A partir du JSON fourni plus haut, dans le gulpfile.js placer ces différentes parties :

var appFiles = {
  scripts: [paths.scripts.src + '*.js', './gulpconf.json']
};

var appFiles = {

scripts: [paths.scripts.src + '*.js', './gulpconf.json']

};

var fs = require('fs');
var gulpconf = "./gulpconf.json";

1 2	var fs = require('fs'); var gulpconf = "./gulpconf.json";

gulp.task('js:vendor',function(){
  var json = JSON.parse(fs.readFileSync(gulpconf)),
  vendorjs = json.js.vendor;

  gulp.src(vendorjs)
    .pipe(plugins.uglify())
    .pipe(plugins.rename(function(opt) {
      opt.basename = opt.basename.replace(/\./g,'-');
      return opt;
    }))    
    .pipe(plugins.size())
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('js:custom', function() {
  gulp.src(paths.scripts.src + '*.js')
    .pipe(plugins.uglify())
    .pipe(plugins.rename(function(opt) {
      opt.basename = opt.basename.replace(/\./g,'-');
      return opt;
    }))    
    .pipe(plugins.size())
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('js:vendor',function(){

var json = JSON.parse(fs.readFileSync(gulpconf)),

vendorjs = json.js.vendor;

gulp.src(vendorjs)

.pipe(plugins.uglify())

.pipe(plugins.rename(function(opt) {

opt.basename = opt.basename.replace(/\./g,'-');

return opt;

}))

.pipe(plugins.size())

.pipe(gulp.dest(paths.scripts.dest));

});

gulp.task('js:custom', function() {

gulp.src(paths.scripts.src + '*.js')

.pipe(plugins.uglify())

.pipe(plugins.rename(function(opt) {

opt.basename = opt.basename.replace(/\./g,'-');

return opt;

}))

.pipe(plugins.size())

.pipe(gulp.dest(paths.scripts.dest));

});

gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){
  gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']);
  gulp.watch(appFiles.styles, ['style']).on('change', function(evt) {
    changeEvent(evt);
  });
  gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) {
    changeEvent(evt);
  });
  gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) {
    changeEvent(evt);
  });
});

gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){

gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']);

gulp.watch(appFiles.styles, ['style']).on('change', function(evt) {

changeEvent(evt);

});

gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) {

changeEvent(evt);

});

gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) {

changeEvent(evt);

});

Articles récents

Catégories

Archives

Méta

Étiquette : json

[Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

[AngularJS] Utiliser un filtre pour récupérer le nombre de clés contenues dans un objet JSON.

Source JS du filtre:

Utilisation qui en est faite dans le template:

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

Problématique :

Solution :