Добавление объектов в каждой записи данных JSON

Question

Как добавить новые элементы (под этим я имею в виду планеты) к ниже звездной системы в фрагменте кода, на основе JSON данных, таких, как это:

 [{ 
      "rowid": 1, 
      "Radius size": 3 , 
      "Distance": 110 pixels, 
     }, 
     { 
      "rowid": 2, 
      "Size": 2.5, 
      "Distance": 120 pixels, 
     }] 

Каждая строка ID - это собственная планета с ее собственным размером и положением. Расстояние, конечно, основано на расстоянии планеты от элемента солнца, который является центром страницы. Расстояние на планету должно быть под другим углом, иначе все они выстроились бы идеально (нереалистично). Любые идеи о том, как это можно достичь?

var ball = {}; 
 

 
function makeBall(spec) { 
 
    // Create the element 
 
    var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
 
    // Set its various attributes 
 
    ["id", "cx", "cy", "r", "class"].forEach(function(attrName) { 
 
    if (spec.element[attrName]) { 
 
     circle.setAttribute(attrName, spec.element[attrName]); 
 
    } 
 
    }); 
 
    // Add it to the sun 
 
    document.getElementById("Sun2").appendChild(circle); 
 
    // Remember its animation settings in `ball` 
 
    ball[spec.element.id] = spec.animation; 
 
} 
 

 
function addObject() { 
 
    // Create a spec to use with makeBall from the fields 
 
    var spec = { 
 
    element: { 
 
     id: document.getElementById("new-id").value, 
 
     class: document.getElementById("new-class").value, 
 
     r: parseFloat(document.getElementById("new-r").value) 
 
    }, 
 
    animation: { 
 
     speed: 2, 
 
     spin: 30, 
 
     side: 40 
 
    } 
 
    }; 
 
    // Some minimal validation 
 
    if (!spec.element.id || !spec.element.r || !spec.animation.speed || !spec.animation.spin || isNaN(spec.animation.side)) { 
 
    alert("Need all values to add a ball"); 
 
    } else if (ball[spec.element.id]) { 
 
    alert("There is already a ball '" + spec.element.id + "'"); 
 
    } else { 
 
    // Do it! 
 
    makeBall(spec); 
 
    } 
 
} 
 

 
function rotation(coorX, coorY, object) { 
 
    object.side += (1.0/object.speed); 
 
    var ang = object.side * 2.0 * Math.PI/180.0; 
 
    var r = object.spin; 
 

 
    return { 
 
    x: Math.cos(ang) * r - Math.sin(ang) * r + coorX, 
 
    y: Math.sin(ang) * r + Math.cos(ang) * r + coorY 
 
    }; 
 
} 
 

 
function rotationball(circle) { 
 
    var x, y, x_black, y_black, e, newpos, black; 
 

 
    // We always rotate around black 
 
    black = document.getElementById("black"); 
 
    
 
    // Get this circle and update its position 
 
    e = document.getElementById(circle); 
 
    x_black = parseFloat(black.getAttribute("cx")); 
 
    y_black = parseFloat(black.getAttribute("cy")); 
 
    newpos = rotation(x_black, y_black, ball[circle]); 
 

 
    e.setAttribute("cx", newpos.x); 
 
    e.setAttribute("cy", newpos.y); 
 
} 
 

 
function animate() { 
 
    Object.keys(ball).forEach(function(id) { 
 
    rotationball(id); 
 
    }); 
 
} 
 

 
var animateInterval = setInterval(animate, 1000/60);

.st0 { 
 
    fill: yellow; 
 
} 
 

 
.st1 { 
 
    fill: orange; 
 
}

<div>Add ball: 
 
    <label> 
 
    ID: <input type="text" id="new-id" value="newball"> 
 
    </label> 
 
    <label> 
 
    R: <input type="text" id="new-r" value="10"> 
 
    </label> 
 
    <label> 
 
    Speed: <input type="text" id="new-speed" value="1.2"> 
 
    </label> 
 
    <label> 
 
    Spin: <input type="text" id="new-spin" value="80"> 
 
    </label> 
 
    <label> 
 
    Side: <input type="text" id="new-side" value="0.0"> 
 
    </label> 
 
    <label> 
 
    Class: <input type="text" id="new-class" value="st1"> 
 
    </label> 
 
    <button type="button" onclick="addObject()"> 
 
    Make Ball 
 
    </button> 
 
</div> 
 

 
<div class="spinning"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" id="solly" viewBox="0 0 1000 600"> 
 
    <g id="Sun2"> 
 
     <circle id="black" class="st0" cx="500" cy="300.8" r="10" /> 
 
    </g> 
 
    </svg> 
 
</div>

Выше код (не совсем моя), что добавляет новые шары (планеты), если он имеет свой собственный идентификатор. Я просто хочу переключить это с помощью набора данных JSON.

EDIT: Ниже приведены оригинальные примеры двух записей. Как вы можете видеть, это предлагает намного больше, но избыточные свойства. Все, что я на самом деле требую от каждой записи является размером (Planet Radius [Jupiter радиусов] и расстояние (расстояние [шт]). Расстояние должно быть преобразовано в пикселы, размер хитрее.

 [{ 
     "rowid": 1, 
     "Host name": "TrES-3", 
     "Number of Planets in System": 1, 
     "Planet Mass or M*sin(i)[Jupiter mass]": 1.91, 
     "Planet Radius [Jupiter radii]": 1.336, 
     "Planet Density [g": { 
      "cm**3]": 0.994 
     }, 
     "Distance [pc]": 228, 
     "Effective Temperature [K]": 5650, 
     "Date of Last Update": "5/14/2014" 
    }, 
    { 
     "rowid": 2, 
     "Host name": "UZ For", 
     "Number of Planets in System": 2, 
     "Planet Mass or M*sin(i)[Jupiter mass]": 6.3, 
     "Planet Radius [Jupiter radii]": null, 
     "Planet Density [g": { 
      "cm**3]": null 
     }, 
     "Distance [pc]": null, 
     "Effective Temperature [K]": null, 
     "Date of Last Update": "5/14/2014" 
    }] 

Answer 1

Это на самом деле довольно просто :

Если вы читаете HTML-код, вы заметите, что нажатие кнопки «Сделать мяч» вызовет addObject(). Таким образом, вы идете и проверяете эту функцию в JS-коде. addObject() просто анализирует значения из полей ввода в объект, называемый spec, затем вызывает makeBall (spec).

Что вам нужно сделать, это провизировать то же самое спецификация объекта данных для функции makeBall для каждой из ваших данных JSON.

Я не вижу свойства для добавления расстояния в функции makeBall().

Handle JSON через AJAX с JQuery:

// assuming your local server runs on port 8080 
$.getJSON('localhost:8080/path/to/your/file', function (json) { 
    // since we use getJSON, it is already parsed and a javascript object 
    // additional parsing inside the addObjectsFromJson function is not necassary 
    // and would throw an error 
    addObjectsFromJson(json); 
}); 

function addObjectsFromJson(json) { 
    for (var i = 0; i < json.length; i++) { 
     var planet = json[i]; 
     // create a spec to use with makeBall from the json 
     var spec = { 
      element: { 
       id: planet.rowid, 
       // you don't provide a style class in your json yet, using yellow as default 
       class: 'st0', 
       // your json must have a standard property for radius, 
       // currently you have "Radius size" (is wrong since properties cannot have spaces) and "Size" 
        r: planet["Planet Radius [Jupiter radii]"] 
       }, 
       animation: { 
        speed: 2, 
        spin: 30, 
        side: planet["Distance [pc]"] 
     }; 
     makeBall(spec); 
    } 
}