x-select

selecting items from JSON using an extended json select language used by x-x.io x-components

x-select

Build Status](https://travis-ci.org/x-component/x-select)

./select.js

select

x-select

This module can be used to select elements from nested JSON dataobjects with a css like syntax.

It is based on js-selectand thereby indreclty also on JSONSelectand js-traverse

As an extension to the json selector syntax x-select also supports boolean expressions for sets. The sequential binary boolean logic operators 'and', 'or' and the unary 'not' are supported. Brackets()can be used to create nested boolean expressions. True and False are then represented by sets: an empty set represents false. A non empty set [true] represents true.

Note: Per default the selecting of elments is done case insensitve and the following values are skipped from the result set undefined, null, false, NaN

x-select is particularly usefull to handle deeply nested JSON structures as they are often returned by REST Services. (See examples)

usage

select

var select = require('x-select');
var result = select( object, selector, options );

result.forEach(function(node){...})

You can loop over each found node within the structure

result.forEach(function(node){
      // this defines the context for the found element, see js-traverse documentation
      // you can use p.e. this.remove(); or this.update(new_value);
  });

result.nodes()

This delivers simply an array of all found nodes

result.empty()

returns if the result set is empty

result.first()

Deliverse the first result found

options.skip

options.skip is an array, which contains values to skip from the result set. select.skip: contains the default array To pass a changed skip array: on can use the default one use the functions notand addof that array, to modify it as shown here:

select(obj, ' .property ' , {skip: select.skip.not(false) } );
  select(obj, ' .property ' , {skip: select.skip.add('x').not(false) } );

Examples:

assume we have the following JSON structure:

var o = {
      users: [
          { person : { name: 'joe' , age: 20 , active:true, address: { street: 's1' } } },
          { person : { name: 'mary', age: 35 , active:false, friends : { person: { name: 'bob' } } },
          { person : { name: 'bob' , age: 40 , active:true} }
     ]
  };
var persons1 = select( o, '.users .person' ).nodes(); // returns 4 nodes {name: ....} also the person: {...} within friends
var persons2 = select( o, '.users > .person' ); // returns 0 nodes
var persons3 = select( o, '.users > object > .person' ); // returns 3 nodes {name: ....} directly within the objects in the array
var person   = select( o, ' .person:has( .age:expr( x < 30 || x >= 40 ) ) ').first(); // get the first person younger then 30 or older then 40
  var name     = select( person,'.name).first(); // joe
  var name2    = select( select(o, ' .person:has( .age:expr( x < 30 || x >= 40 ) ) ').nodes(), '.name' ).first(); // joe
var names   = select(o, ' .age:expr( x < 30 || x >= 40 ) ~ .name ').nodes(); // [ 'joe', 'bob' ]
var name_has_friend_bob = select(o, ' .person:has( .friends .name:val("bob")) > .name' ).first(); // 'mary'
var there_are_users_with_age_40_or_25  = !select(o,'.age:expr(x=40) or .age:expr(x=25)').empty();  // true
  var there_are_users_with_age_40_and_25 = !select(o,'.age:expr(x=40) and .age:expr(x=25)').empty(); // false
  var there_are_users_with_age_40_and_20 = !select(o,'.age:expr(x=40) and .age:expr(x=20)').empty(); // true
var active_user_count     = select(o,'.active').nodes().length; // 2, false is skipped per default nodes is [ true, true ]
  var has_active_flag_count = select(o,'.active',{skip:select.skip.not(false)}).nodes().length; // 3, nodes is [ true, false, true ]
// joe's age
  var age = select( o, ' .name:val("joe") ~ .age' ).first(); // 20
// today is joe's birthday, so increment the age
  select( o, ' .name:val("joe") ~ .age' ).forEach(function(age){
      this.update(age+1);
  });
var new_age = select( o, ' .name:val("joe") ~ .age' ).first(); // 21

Notes:

If the objectis a dom tree node, select()will call object.ownerDocument.defaultView.$and return the result. In this case css selectors supported by the underlying css selector engine are supported.

Repository

https://github.com/x-component/x-select.git


上一篇:function-inspector
下一篇:x-templates

相关推荐

  • 选择select2之间有什么区别?

    选择select2之间有什么区别?...

    2 年前
  • 记录一下Select2的简单使用

    官网 https://select2.org/(https://select2.org/) 因为我想实现添加标签的功能,后面发现了Select2可以完成 (在列表里面选择,然后添加到文本框中,目前只...

    8 个月前
  • 解构reselect

    reselect version: 4.0.0 描述 reselect是能够缓存函数运行结果的一个缓存函数生成器,其接收一个函数返回一个新的具有缓存能力的函数 用途 1. 用来缓存需...

    4 个月前
  • 解决element中select组件初始化显示数字的问题

    在初始化的时候当我们 拿着后台返回的值,去赋值给下拉框的时候,常常仅仅显示数字,为什么呢?不是应该显示id对应的value吗?两种可能:1.后端返回的下拉框中的数据,缺少了这一条,如果说后端说返给你了...

    10 天前
  • 视频讲解 vue city selector 城市选择器

    vue city selector B站地址(https://www.bilibili.com/video/av27603810) 城市选择器,以选择器的形式将中国各个省市级城市弹出,供用户选择,视...

    2 年前
  • 获取元素的属性时,不可使用querySelectorAll图书馆吗?

    Andersryanve(https://stackoverflow.com/users/2200659/anders)提出了一个问题:Get elements by attribute when q...

    2 年前
  • 苹果手机输入框(input,select,textarea)失去焦点后,页面不归位问题

    我是一块砖,哪里需要往哪搬! 移动项目开发中经常会遇到奇奇怪怪的问题,在正常不过了。而由于ios和安卓系统的不同,适配问题也是时常发生。 而其实一个,苹果手机输入框(input,select,text...

    4 个月前
  • 用Selectize.js输入tag

    本来处理tags输入控件是很多的,比如select2,又比如chosen,都各有各的好处,但也各有各的不足。今天选择一款简单的插件:selectize.js Github: (https://gith...

    2 年前
  • 标签与阿贾克斯select2

    j0kSri(https://stackoverflow.com/users/569101/j0k)提出了一个问题:Tagging with AJAX in select2,或许与您遇到的问题类似。

    2 年前
  • 本周题:获取和修改input(text ileadiocheckboxselect)的值

    前言 这个题乍一看,简单,再看,还是简单,仔细一看,是不是得查一下了。 反正小韭菜是每次用到都需要去查一番。 今天我来分框架给大家说一番。 Jquery 获取元素: 基本上有两种获取方式...

    4 个月前

官方社区

扫码加入 JavaScript 社区