ekleme nesneler

Question

nasıl bu gibi JSON verilerine dayanarak, kod parçacığı aşağıda yıldız sistemine (bu tarafından ben gezegenleri ortalama) yeni unsurlar eklemek yapın:

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

Her satır ID kendi büyüklüğü ve pozisyonu ile kendi gezegenidir. Uzaklık, gezegenin, sayfanın merkezi olan güneş unsurundan uzaklığına dayanmaktadır. Gezegenin başına olan mesafenin farklı bir açıda olması gerekir, aksi takdirde hepsi mükemmel bir şekilde (gerçekçi olmayan) olurlar. Bunun nasıl elde edilebileceğine dair herhangi bir fikir var mı?

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>

yukarıda

kendi kimliği varsa, yeni topları (gezegen) ekler kodu (tamamen madeni olmayan) 'dir. Bunu sadece JSON veri kümesinde değiştirmek istiyorum.

DÜZENLEME: Aşağıda iki kayıt orijinal örnekleridir. Gördüğünüz gibi çok daha fazla ama gereksiz özellikler sunuyor. Gerçekten her kayıttan gerektiren tüm boyutu (Gezegen Radius [Jüpiter yarıçapları] ve mesafe vardır (Mesafe [pc]). Mesafe piksel dönüştürülmesi gerekir, boyut daha zordur.

 [{ 
     "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

Aslında oldukça basit :. HTML yoluyla okursanız

, sen Yani gidin) "Make Topu" butonuna tıklayarak AddObject (arayacak fark ve JS kodu bu işleve ait kontrol edecektir AddObject() basitçe değerleri ayrıştırır. giriş alanlarından spec adındaki bir nesneye, sonra makeBall (spec) öğesini çağırır.

Yapmanız gereken şey, JSON verilerinizin her biri için makeBall işlevi için tam olarak aynı veri nesnesi spesifikasyonu.

function addObjectsFromJson(json){ 
    // using try catch block because JSON.parse will throw an error if the json is malformed 
    try{ 
     var array = JSON.parse(json); 
     for(var i = 0; i < array.length; i++){ 
      var planet = array[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); 
     } 
    }catch(e){ 
     console.log('error: ' + e); 
    } 
} 

olsa makeBall() fonksiyonunda mesafe eklemek için bir özellik görmüyorum. jQuery ile ajax

Sap JSON:

// 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); 
    } 
}