Het veranderen van objectnamen binnen array Javascript - Softwareontwikkeling

dinsdag 9 september 2014 10:39

Acties:

Verwijderd

Topicstarter

Hallo!

Ik kom er niet uit en heb een vers oog nodig om het op te lossen. Ik heb een stukje code waar ik json data ophaal van een php bestand. Zover zo goed. Maar wanneer ik deze data probeer aan te passen ( de objectnamen te wijzigen ) dan gebeurt er dus helemaal niets. Ik snap er helemaal niets van...

[code=taal]

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

var myArray = [];

$(document).ready(function () {

$(function () {
$.ajax({

type: 'post',
url: 'connect.php',

success: function( data ) {
console.log( data );
myArray.push(data);

}
});
});

function DumpCustomers() {
var i;

for(i=0;i<myArray.length; i++){
myArray[i].data = myArray[i].addressLine1; // Change here
delete myArray[i].addressLine1;
myArray[i].value = myArray[i].customerName; // And here
delete myArray[i].customerName;
}

alert(myArray);

}

</script>

</head>

<body>

<div id="text-id">klikkkkk</div>
<br/>

oasfhsohgvsegvse<br><br><br><br>

<input type="button" id="bt1" onclick="DumpCustomers();" value="Dump Customers"/>
</body>
</html>

[/code=taal]

[ Voor 9% gewijzigd door Verwijderd op 09-09-2014 10:40 ]

dinsdag 9 september 2014 11:31

Acties:

vpm

Think, tinker, tank

MyArray zit in een andere scope en bestaat dus niet binnen DumpCustomers.
Overigens is $(document).ready(){} hetzelfde als $(function(){}), dus waarom zou je dat twee keer definieren.

Waarom niet:

JavaScript:

 var myarray =  new Array();
$(function(){
 $.ajax();
 function DumpCustomers() {};
});

?

Succes.

[ Voor 30% gewijzigd door vpm op 09-09-2014 11:33 ]

dinsdag 9 september 2014 11:51

Acties:

Verwijderd

Topicstarter

Als ik die functie daar neerzet krijg ik dat DumpCustomers niet Defined is

dinsdag 9 september 2014 12:45

Acties:

Verwijderd

Topicstarter

Ik probeer dus de array objectnamen te wijzigen. Op dit moment ziet mij array er zo uit:

[{"customerName":"Atelier graphique","addressLine1":"54, rue Royale"},{"customerName":"Signal Gift Stores","addressLine1":"8489 Strong St."},{"customerName":"Australian Collectors, Co.","addressLine1":"636 St Kilda Road"}, enz,

En dat probeer ik te veranderen in mijn DumpCustomers functie. Echter verandert er niets.

dinsdag 9 september 2014 14:21

Acties:

MoietyMe

zij/haar

Volgens mij doet dit wat jij wil: Change Array attributes

Gooi sowieso je JS even door iets als JS Hint om de fouten er uit te halen.

dinsdag 9 september 2014 14:51

Acties:

.oisyn

Moderator Devschuur®

Demotivational Speaker

vpm schreef op dinsdag 09 september 2014 @ 11:31:
MyArray zit in een andere scope en bestaat dus niet binnen DumpCustomers.

Say what? myArray zit in de global scope (in window zo je wilt). DumpCustomers declareert geen lokale myArray dus die 'ziet' gewoon de globale array.

Waarom niet:

JavaScript:

 var myarray =  new Array();
$(function(){
 $.ajax();
 function DumpCustomers() {};
});

Omdat hij DumpCustomers dan niet meer vanuit de global scope aan kan roepen, die leeft immers alleen binnen de anonymous function.

[ Voor 28% gewijzigd door .oisyn op 09-09-2014 14:53 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 9 september 2014 15:04

Acties:

Verwijderd

Topicstarter

@Good Fella

Bedankt voor je reactie! Mijn code werkt binnen Fiddle inderdaad prima, echter wanneer ik het afspeel vanaf mn localhost werkt het niet meer. Omdat ik op Fiddle met een statische array werk en op localhost een dynamisch (ik roep hem aan van connect.php) zou het misschien daar een probleem veroorzaken?

Ben overigens mn code door JSLint aan het halen maar zie zo snel geen grote problemen, wel een aantal kleinere zaken maar dat mag geen problemen geven.

[ Voor 19% gewijzigd door Verwijderd op 09-09-2014 15:16 ]

dinsdag 9 september 2014 15:48

Acties:

vpm

Think, tinker, tank

.oisyn schreef op dinsdag 09 september 2014 @ 14:51:
[...]

Say what? myArray zit in de global scope (in window zo je wilt). DumpCustomers declareert geen lokale myArray dus die 'ziet' gewoon de globale array.

In de TS nog niet (i.e. gewijzigd).

En mijn tip was idd verkeerd. Werk zelf nogal veel met abstracte js en roep dus nooit functies vanuit mn html.

Dus dan wordt het vanzelfsprekend:

JavaScript:

var arr = [];
$(function(){
  $.ajax();
  $('identifier').click(function(){});
});

een stuk netter dan al die vieze dhtml.

Belangrijker: Ik ben het spoor bijster wat je met de functie wil bereiken.

code:

__start__
{
 [addressline1: 'string', customername: 'string']
}
__bewerking__
{
 [addressline1: 'string', customername: 'string', data: addressline1, value: customername]
}
__result__
{
 [data: addressline1, value: customername]
}

Wat heb je nu gedaan... behalve niks?!

NB: Het is niet de bedoeling dat we alles gaan zitten voorkauwen. beetje eigen inzet mogen we wel verwachten

[ Voor 65% gewijzigd door vpm op 09-09-2014 15:59 ]

dinsdag 9 september 2014 16:06

Acties:

.oisyn

Moderator Devschuur®

Demotivational Speaker

vpm schreef op dinsdag 09 september 2014 @ 15:48:
[...]

In de TS nog niet (i.e. gewijzigd).

Sorry maar nee, ook in het origineel (dat ik als mod kan zien) is die code precies hetzelfde. De enige wijzigingen zijn wat stukjes code die zijn verwijderd

. De code zoals hij er staat zou in principe gewoon moeten kloppen, en het probleem lijkt me dan ook elders te liggen.

@TS definieer "er verandert niets". Hoe kom je tot die conclusie?

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 9 september 2014 16:14

Acties:

Verwijderd

Topicstarter

@vpm
Het is de bedoeling om:

__start__
{
[addressline1: 'string', customername: 'string']
}

te veranderen naar

__Einde__
{
[data: 'string', value: 'string']
}

En ik ben d'r al de hele dag mee bezig en ben mezelf al aan het opvreten....

@.oisyn
Met er verandert niets bedoel ik dat als ik die bewerkte variabele vervolgens uitlees dat

{
[addressline1: 'string', customername: 'string']
}

nog steeds bestaat.

Echter denk ik dat het wellicht aan de syntax van mn data ligt. Heb het wel door een json validator gehaald en die zegt dat het wel goed is.

[ Voor 7% gewijzigd door Verwijderd op 09-09-2014 16:21 ]

dinsdag 9 september 2014 16:24

Acties:

.oisyn

Moderator Devschuur®

Demotivational Speaker

Komt de code uit de TS voor 100% overeen met je werkelijke code?

Wat ik verder wel apart vind is dat je de 'data' in z'n geheel pusht naar myArray. myArray bevat dus altijd maar 1 item. Mijn gevoel zegt dat 'data' eigenlijk zelf een array is, en dat je de contents van die array wilt overhevelen naar myArray.

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

dinsdag 9 september 2014 16:48

Acties:

Verwijderd

Topicstarter

Dit is nu mijn hele code:

[code=taal]
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

var myArray = [];

/*jslint browser: true*/
/*global $, jQuery, alert*/

$(function () {
"use strict";
$.ajax({
type: 'post',
url: 'connect.php',
success: function (data) {
myArray.push(data);
}

});

});

var listCustomers = function () {
"use strict";
var i;
for (i = 0; i < myArray.length; i += 1) {
console.log(myArray[i]);
}
}

var changeAddressToCity = function() {
for (var i = 0; i < myArray.length; i+=1) {
myArray[i].value = myArray[i].customerName;
delete myArray[i].customerName;
}
listCustomers();
}

window.onload = listCustomers;

</script>

</head>

<body>

<button id='changeArray'>
change array
</button>
</body>
</html>

<script type="text/javascript">

document.getElementById('changeArray').addEventListener('click', changeAddressToCity);

</script>

[/code=taal]

dinsdag 9 september 2014 21:49

Acties:

vpm

Think, tinker, tank

Use strict; weer wat geleerd. Ik zou niet weten waarom je het gebruikt, maar het is een nobel streven.

Ten eerste is je html een beetje slordig. Ik weet niet of het zo is, maar het lijkt me goed mogelijk dat diverse code niet uitgevoerd wordt doordat de browser het niet kan interpreteren.

HTML:

<!doctype html>
<html>
 <head/>
 <body>
   <DOM OBJECTS>

   <script src="jquery" />
   <script>
     my scripts
   </script>
 </body>
</html>

Ten tweede, je gebruikt jQuery, maar onderin je pagina ga je regulier js gebruiken (punt 1 meegenomen).
$('#changeArray').click(function(){ }); die je binnen je script tags plaatst.

Ik krijg een beetje het vermoeden dat je niet echt bekend bent met het programmeren an sich, dan wel de conventies. Misschien een goed idee om een paar tuts te volgen?

dinsdag 9 september 2014 22:17

Acties:

Verwijderd

Topicstarter

Ja, ik ben er geen kei in maar d'r staan inderdaad wat vreemde dingen in zoals die strict

Was daar zelf best trots op, maarja dat werd aangeraden door een javascript validator. Betwijfel of het veel nut heeft. Dit is echter een kladje wat je hierboven ziet en zal het dus nogal wat opgeschoond worden.

Maar zoals ik al zei ben ik er vandaag al ff mee bezig geweest en heb ik inmiddels 10 verschillende dingen geprobeerd waar nog het een en ander van is terug te vinden. Inclusief jquery oplossingen. Maar je hebt gelijk om het gewoon puur javascript te houden.

En die laatste Eventlistener kan ik pas toewijzen als die button is aangemaakt in de html, vandaar dat ie onderaan staat.

[ Voor 9% gewijzigd door Verwijderd op 09-09-2014 22:20 ]

dinsdag 9 september 2014 22:59

Acties:

.oisyn

Moderator Devschuur®

Demotivational Speaker

Volgens mij heb je zelfs dan nog geen garantie dat de DOM ook daadwerkelijk is opgebouwd. Het standaard event daarvoor is DOMContentLoaded op het document. Mocht je oude browsers zoals IE8 willen supporten dan zou ik daar gewoon de standaard jQuery constructie voor gebruiken: $(function() { /* ... */ } )

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

woensdag 10 september 2014 10:08

Acties:

vpm

Think, tinker, tank

Verwijderd schreef op dinsdag 09 september 2014 @ 22:17:
Maar je hebt gelijk om het gewoon puur javascript te houden.

Dat heb ik nooit gezegd. Ik ben juist fan van jQuery. Overhead daar gelaten, jQuery is zelfs voor de simpelste dingen bruikbaar. Overigens, mijns inziens, als je de jquery.min.js van code.google of code.jquery gebruikt, is die overhead wel te overzien (cache etc.).

woensdag 10 september 2014 10:52

Acties:

Verwijderd

Topicstarter

Oke ben vanochtend weer gaan kijken of ik het probleem kon vinden en vond dit:

Deze volgende code werkt wel en geeft als resultaat in de consolelog:

Object {value: "Henk", data: "Henktown"}
Object {value: "Tweak", data: "Amsterdam"}
Object {value: "Ers", data: "Duckstad"}

Let op! Hier staat er dus letterlijk Object voor ieder object.
Dit is de code die daarbij hoort.

[code=taal]
var customers = [{"customerName": "Henk", "address": "Henktown"},{"customerName": "Tweak", "address": "Amsterdam"},{"customerName": "Ers", "address": "Duckstad"}]

var listCustomers = function () {

var i;
for (i = 0; i < customers.length; i += 1) {
console.log(customers[i]);
}
}

var changeAddressToCity = function() {
for (var i = 0; i < customers.length; i+=1) {
customers[i].value = customers[i].customerName;
customers[i].data = customers[i].address;
delete customers[i].customerName;
delete customers[i].address;
}
listCustomers();
}

window.onload = function ()
{

document.getElementById('changeArray').addEventListener('click', changeAddressToCity);
}
[/code=taal]

De volgende code die ik hieronder ga linken werkt niet en geeft in de consolelog de volgende resultaten.

[{"customerName":"Atelier graphique","addressLine1":"54, rue Royale"},{"customerName":"Signal Gift Stores","addressLine1":"8489 Strong St."}, {etc, ....}]

[code=taal]
var myArray = []

$(function () {

$.ajax({
type: 'post',

url: 'connect.php',
success: function (data) {

myArray.push(data);
}

});

});

var listCustomers = function () {

var i;
for (i = 0; i < myArray.length; i += 1) {
console.log(myArray[i]);
}
}

var changeAddressToCity = function() {
for (var i = 0; i < myArray.length; i+=1) {
myArray[i].value = myArray[i].customerName;
myArray[i].data = myArray[i].addressLine1;
delete myArray[i].customerName;
delete myArray[i].addressLine1;
}
listCustomers();
}

window.onload = function ()
{

document.getElementById('changeArray').addEventListener('click', changeAddressToCity);
}
[/code=taal]

Ik weet niet of het hulpzaam is maar hier is een stukje relevante code van mijn PHP bestand. Maar volgens zit daar alles wel goed.

[code=taal]

$sql = "SELECT customerName, addressLine1
FROM customers";

$result = mysql_query($sql);

while ($row = mysql_fetch_assoc($result)) {

$array[] = ($row);
}

echo json_encode($array);

[/code=taal]

woensdag 10 september 2014 11:27

Acties:

MoietyMe

zij/haar

Leuk om te zien dat je probeert dit probleem op te lossen, maar het is natuurlijk niet de bedoeling om code zo één op één over te nemen van mijn voorbeeld

Het is de bedoeling dat je begrijpt wat er geschreven is en dat je dat vervolgens zelf kan maken; anders leer je er weinig van.

Wat krijg je uit de dynamische array als je listCustomers aanroept?

woensdag 10 september 2014 11:42

Acties:

Verwijderd

Topicstarter

@Good Fella
Ik kan moeilijk nu gaan beweren dat ik de hele code snap terwijl ik er niet uitkom maar laat ik dan zeggen dat ik het voor 95% snap. Het eindresultaat begrijp ik namelijk niet.

De reden dat ik dezelfde functie namen heb overgenomen is omdat ik het gwn uit fiddle heb overgenomen. Mijn dank ook voor het voorbeeld! Ik zag alleen geen reden om de namen van de functies of variabelen te veranderen.

Maargoed als ik de listCustomers aanroep wanneer daar myArray ofwel de dynamische array in staat krijg ik
[code=taal]
[{"customerName":"Atelier graphique","addressLine1":"54, rue Royale"},{"customerName":"Signal Gift Stores","addressLine1":"8489 Strong St."},{"customerName":"Australian Collectors, Co.","addressLine1":"636 St Kilda Road"},{"customerName":"La Rochelle Gifts","addressLine1":"67, rue des Cinquante Otages"}, etc
[/code=taal]

Ik vraag mij echter af of de data die in mijn ajax succes functie wel echt in de array blijven staan. Want wanneer ik direct onder de ajax functie [code=taal]console.log(myArray);[/code=taal] krijg ik [] te zien in consolelog.

En als ik [code=taal]console.log(myArray[1]);[/code=taal] doe krijg ik undefined te zien.

woensdag 10 september 2014 12:01

Acties:

Verwijderd

Topicstarter

Overigens werkt de code wel wannneer ik bij het defineren van myArray de hele json data erin kopieer en vervolgens de ajax functie uitschakel.

woensdag 10 september 2014 15:15

Acties:

MoietyMe

zij/haar

Wat ik mij eigenlijk wel afvraag is waarom je zo graag de attribuut-namen wil veranderen?

woensdag 10 september 2014 15:44

Acties:

Verwijderd

Topicstarter

Om het aan te laten sluiten op een ander stuk code die al af is en die attribute namen al gebruikt worden. Het gaat daarbij om een auto complete functie bij het invoeren van tekst.

woensdag 10 september 2014 16:41

Acties:

Verwijderd

Topicstarter

Keb het opgelost

Ik heb het gewoon in de PHP aangepast met

[code=taal]
foreach($array as &$val){
$val['value'] = $val['customerName'];
unset($val['customerName']);
}

foreach ($array as &$val) {
$val['data'] = $val['addressLine1'];
unset($val['addressLine1']);
}
[/code=taal]

woensdag 10 september 2014 16:42

Acties:

Verwijderd

Topicstarter

Toch heel erg bedankt voor jullie hulp en geduld!

woensdag 10 september 2014 19:53

Acties:

Cartman!

Waarom in 2 loops dan...? Overigens is t imo geen oplossing maar n workaround

donderdag 11 september 2014 09:04

Acties:

Verwijderd

Topicstarter

@Cartman
Klopt, maar achteraf is het misschien beter zo om deze handeling alvast op de server te verrichten.

Zo heb ik het nu staan.
[code=taal]
foreach($array as &$val){
$val['value'] = $val['customerName'];
$val['data'] = $val['addressLine1'];
unset($val['customerName']);
unset($val['addressLine1']);
}
[/code=taal]

[ Voor 4% gewijzigd door Verwijderd op 11-09-2014 09:05 ]

Pagina: 1

Reageer