What is the difference between elemental.json and com.google.json library?

Question

Why do we have elemental.json library over com.google.json?

I'm struggling with the creation of JsonArray in Vaadin 7.

In Json.createArray() there is no add method. How can I create a json array?

I want to create an array like:

var shapeArray = 
[
    {type: 'rectangle', x:50, y:50, width : 50, height: 50},
    {type: 'circle', x:75, y:150,  r : 20}, 
    {type: 'rectangle', x:50, y:200, width : 100, height: 20},
    {type: 'circle', x:75, y:300,  r : 30}, 
];

Am I missing something?

Answer 1

As per this official statement, starting with 7.4.0 elemental.json.* replaces the old packages.

I've played around a bit as I also had to adapt to these changes and I found at least these 2 possibilities:

import elemental.json.Json;
import elemental.json.JsonArray;
import elemental.json.JsonValue;
import elemental.json.impl.JsonUtil;
import org.junit.Test;

public class JsonTest {

    @Test
    public void shouldParseJson() {
        JsonArray array = JsonUtil.parse("[\n" +
                "    {'type': 'rectangle', 'x':50, 'y':50, 'width': 50, 'height': 50},\n" +
                "    {'type': 'circle', 'x':75, 'y':150,  'r' : 20}, \n" +
                "    {'type': 'rectangle', 'x':50, 'y':200, 'width' : 100, 'height': 20},\n" +
                "    {'type': 'circle', 'x':75, 'y':300,  'r' : 30}, \n" +
                "]");


        System.out.println("Parsed string array:\n" + JsonUtil.stringify(array, 2));
    }


    @Test
    public void shouldCreateArray() {
        //for the sake of brevity I'll create the object by also parsing a string, but you get the general idea
        JsonValue object = JsonUtil.parse("{'type': 'rectangle', 'x':50, 'y':50, 'width': 50, 'height': 50}");
        JsonArray array = Json.createArray();
        array.set(0, object);

        System.out.println("Manually created array:\n" + JsonUtil.stringify(array, 2));
    }
}

Which output

Parsed string array:
[
  {
    "type": "rectangle",
    "x": 50,
    "y": 50,
    "width": 50,
    "height": 50
  },
  {
    "type": "circle",
    "x": 75,
    "y": 150,
    "r": 20
  },
  {
    "type": "rectangle",
    "x": 50,
    "y": 200,
    "width": 100,
    "height": 20
  },
  {
    "type": "circle",
    "x": 75,
    "y": 300,
    "r": 30
  }
]

and

Manually created array:
[
  {
    "type": "rectangle",
    "x": 50,
    "y": 50,
    "width": 50,
    "height": 50
  }
]