Create an HTML table using array data with x,y coordinate

[Will Kriski]

Is there a way to create an HTML table of words/images using array data that contains x and y coordinates like:

[
         {"x":"1","y":"1","name":"will"},
        {"x":"3","y":"1","name":"dave"},
         {"x":"2","y":"1","name":"joe"},
          {"x":"1","y":"2","name":"steve"}
          ];

x would denote the horizontal position in the table, and y the vertical position.

Note the x and y might not be sorted in the correct display order (ie ascending by x then y).

So I'd like to grab the y=1 values and insert td's from x=1 to 3 (size of hor. grid), then repeat for each y value.

I created a very basic fiddle but not much is there - http://jsfiddle.net/willkriski/3usPr/23/

What I'm aiming for is a word/image grid that people can edit each cell to put the text/image/audio urls and save the layout to some sort of array structure, so other design options would be considered.

Thanks

[Marco Alves]

http://jsfiddle.net/marco_m_alves/BN6SG/ -- Is this what you want?

[Andy Joslin]

Lol, I created something similar to Marco, except mine creates a child scope for each item and lets you define a template.  I did that instead of doing homework... oh well, it was definitely more fun than homework :-D

Mine is super inefficient, too.. it watches the array and redraws the whole table when anything changes.. so be careful. http://plnkr.co/edit/bvYgSb?p=preview

[Andy Joslin]

Marco's may actually be better, since it uses ng-repeat..  I should've just ng-repeat and ng-included...

[Will Kriski]

Marco - Wow yes I think so, thanks! I'll try to understand what's going on, looks like underscore is quite useful.

Andy - that's very cool. I'll have a look. Each cell will be editable with label and also add an image and audio to each cell (for speaking the words). Basically this grid but customizable by page with less words and optional images/audio http://imedia-ventures.com/terry/index.html#/sentence

It uses a <ul> and CSS but I thought a table might make more sense when you start customizing for different size grids to fit on the page.

W

[Will Kriski]

Marco - It doesn't seem to work if there isn't a value for a cell (say x = 2), it shifts the cell in 3rd column to 2nd column.  How would you suggest putting in a placeholder? I could fill the array before hand (when people pick the size of the grid 3x3 for example).

W

[Marco Alves]

If you know the size beforehand, then it's easier to implement the way you suggest.

You can also introduce additional logic inside the directive:

• Determine the max-row and max-col in the data (using numbers for x and y instead of string may make it easier to do this)
  
• Build a new, internal data representation of a max-row * max-col grid
• Copy existing values from original data source to internal data representation
• Use the internal data representation as input to the code of fiddle I shared with you

[Harsha Priya G]

I tried {{data.not_usstate}} in  app.component.html i got this api populated in my window.....

{

    "not_usstates": "{\"type\": \"FeatureCollection\", \"crs\": {\"type\": \"name\", \"properties\": {\"name\": \"EPSG:4326\"}}, \"features\": [{\"type\": \"Feature\", \"properties\": {\"state_name\": \"NOT_US\"}, \"geometry\": {\"type\": \"MultiPolygon\", \"coordinates\": [[[[78.21071029010544, 8.83844406898327], [78.21113528186422, 8.83840734505093], [78.21148633227308, 8.838444149506403], [78.2117634958757, 8.838389044083215], [78.21194827044498, 8.838242027066373], [78.21211458199711, 8.838076679629625],6.73816885062907, 10.895398099601442], [76.73784285270953, 10.895681012516938], [76.73754431365079, 10.895883584792713], [76.73703069671411, 10.896070928801128], [76.73658112372917, 10.896244718005606], [76.7362271271908, 10.896550780381627], [76.73553443655618, 10.89688187093712], [76.73509914247597, 10.897029026652302], [76.73458605334086, 10.897148539311432], [76.73379783455105, 10.897307707048014], [76.73300559263419, 10.897416527739484], [76.73292321655417, 10.897434069481102], [76.73250161660742, 10.897499775125532], [76.73198449475932, 10.897555921247585], [76.7316773225831, 10.897654419563235], [76.73157154093614, 10.897766450003633], [76.73145201468384, 10.897888091615984], [76.73134105204282, 10.898000652570868], [76.73120780248476, 10.898172068922742], .........[78.94975602886872, 13.079979781851133], ]]]}}]}"

}

How to display the coordinates alone in console/angular ? and display the same in open layers map??