Giter VIP home page Giter VIP logo

diver.js's Introduction

diver.js

Dives deep into the DOM and dumps it as a js object.

What does it do ?

Creating a rest based app requires you to send data to your server in json or xml (most likely). Well you know when the data is huge on the client side you tend to create the json yourself most of the time by writing a lot of boiler plate code. What if you just had to tweak in your html and the hierarchical json with the values would be created magically for you. Interesting ?

So basically diver does all that for you.

How it works ?

It works by accepting a root-node-id and an empty object. Now it traverses the complete tree and translates every leaf node having a name into its corresponding object literal notation. The name of the leaf node would be translated into an object key and its value will be that key's value. It is important to note that "Select" html element is an exception to the aforementioned criteria. The name attribute on the select element will be taken as the key and the selected option would be taken as it's value.

Terminologies

Read more about the terms used in this repository on the wiki page

Attributes supported by the library

Attribute Value Use With Output Type
group path.to.your.json.property Any non-container html element like h1..h6, p, input(preferably) etc. Any element which will have child elements inside it won't work like table, div etc. string
delimiter Any token that separates the input value. input - Html Element javascript array []
name Any valid object key Any non-container html element like h1..h6, p, input(preferably) etc. Any element which will have child elements inside it won't work like table, div etc. string

How to use it ?

Include the script

<script type="text/javascript" src="diver.js"></script>

Example Html

<div id="container-top" style="margin:10%">
    <div>
        <div style="margin-left: -118px">
            <label for="inputName">Name</label>
            <div>
                <input  type="text"  name="first_name" group="personal_details" placeholder="First"
                value="cafebabe">
                <input  type="text"  name="last_name"  group="personal_details" placeholder="Last"
                value="1991">
            </div>
        </div>
        <div style="margin-left: -118px">
            <label for="inputAge">Age</label>
            <div>
                <input type="text"  name="age" group="personal_details.age" placeholder="Age" value="21">
            </div>
        </div>
        <div style="margin-left: -118px">
            <label for="inputEmail">Email</label>
            <div>
                <input type="text" group="personal_details.email" name="email_id"  placeholder="Email" value="[email protected]">
                <input type="checkbox" group="personal_details" name="isChecked">
                <input type="text" name="values" delimiter="," placeholder="delimited values" value="foo,bar,john-doe">
                <select name="cars">
                    <option>Lamborghini</option>
                    <option>Porsche</option>
                    <option>Maybach</option>
                </select>
            </div>
        </div>
    </div>
</div>

Example call to the diver's function

var obj = diver.traverse('container-top',{});

Output

Input fields with no value will not be dumped for example 'isChecked'

{
"personal_details": {
   "first_name": "cafebabe",
   "last_name": "1991",
   "values":["foo","bar","john-doe"],
   "age": {
     "age": "21"
   },
   "email": {
     "email_id": "[email protected]"
    }
},
"cars": "Lamborghini"
}

diver.js's People

Contributors

ashish-chopra avatar dangilkerson avatar dependabot[bot] avatar feedbacker1991 avatar jaspervhaastert avatar lachieh avatar raul1991 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

diver.js's Issues

Support a delimited values to be dumped as a json array

An attribute that can be given with an element to help dump it in the required data type.

Let's just support a delimited values.

What does this mean

Say I have an input field in which the user is expected to enter the values separated by some delimiter. So a user can use this library to dump that value in form of an json array.

How will it work

We introduce an attribute named delimiter to specify the token that separates the values
and a key (which already exists in the library) to specify the key to index this value in the output json.

Example

<input type="text" delimiter="," value="foo,bar,john-doe" name="key">

This can be output in the json as a json array for now.

{
"key" : ["foo","bar","john-doe"]
}

Add tests

Add tests that would ensure some of the following scenarios

  1. Deep level doms should output the corresponding json.
  2. Invalid scenarios like
    1. Invalid Id element passed to the traverse function.
    2. Unsupported elements should be ignored.

Add some more..

Nested objects don't show up correctly.

Function call :

diver.traverse("container-top",{})

Input html

<div id="container-top" style="margin:10%">
    <div class="hide" id="step_one">
        <div class="form-horizontal control-group" id="step-one-one" style="margin-left: -118px">
            <label class="control-label" for="inputName">Name</label>

            <div class="controls" id="step-one-one-values">
                <input class="input_fat span2" type="text" id="inputName" name="first_name" group="personal_details"
                placeholder="First"
                      value="cafebabe">
                <input class="input_fat span2" type="text" id="inputLastName" name="last_name" group="personal_details" placeholder="Last"
                      value="1991">
            </div>
        </div>
        <div class="form-horizontal control-group" id="step-one-two" style="margin-left: -118px">
            <label class="control-label" for="inputAge">Age</label>

            <div class="controls" id="step-one-two-values">
                <input class="input_fat span2" type="text" id="inputAge" name="age" group="personal_details.number" placeholder="Age" value="21">
            </div>
        </div>
        <div class="form-horizontal control-group" id="step-one-four" style="margin-left: -118px">
            <label class="control-label" for="inputEmail">Email</label>

            <div class="controls" id="step-one-four-values">
                <input class="input_fat span3" type="text" id="inputEmail" name="email_id" group="personal_details.number.email" placeholder="Email"
                      value="[email protected]">
            </div>
        </div>
    </div>
  </div>

Expected Output

{
	"personal_details": {
		"first_name": "cafebabe",
		"last_name": "1991",
		"number": {
			"age": "21",
			"email": {
				"email_id": "bugville @nowhere.com"
			}
		}
	}
}

Actual Output

{
	"personal_details": {
		"first_name": "cafebabe",
		"last_name": "1991",
		"age": "21",
		"email_id": "[email protected]"
	}
}

Update the readme

  • Array values should be specified as the output for the delimiter attribute
  • Update the examples.

Add gulp watch

Watch for the changes in the diver.js and Test.html file and reload it on the browser.

Add examples

Add a wiki for them or commit them to the code base itself.

Improve the readme

Since the dependency on id attribute has been resolved #2 the readme should be updated

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.