creating an array, convert it to json and pass it to php - javascript

I want to fill an array dynamically with javascript, then convert it to a json string and pass it to php to deal with it.
The problem:
When I define the array like -code 1- the output is as expected:
var feld = {
"key1" : "1",
"key2" : "2",
"key3" : "3"
};
for (key in feld) { console.log (key + "= " + feld[key]); }
var jsonString = JSON.stringify(feld);
console.log(jsonString);
OUTPUT:
key1= 1
key2= 2
key3= 3
{"key1":"1","key2":"2","key3":"3"}
If I define the array like -code 2-
var feld = new Array ();
feld["key1"]="1";
feld["key2"]="2";
feld["key3"]="3";
for (key in feld) { console.log (key + "= " + feld[key]); }
var jsonString = JSON.stringify(feld);
console.log(jsonString);
OUTPUT:
key1= 1
key2= 2
key3= 3
[]
which means, that with code -2- there is nothing to pass to php.
what's wrong ?

"-code 1-" is not an array, it's a non-array object. "-code 2-" is an array, but being used as a non-array object. (And the reason you don't see your non-array properties when you stringify it is that since it's an array, JSON.stringify only serializes the array entries, not the non-array properties.)
What's wrong is that if you want an array, you need to create an array:
var feld = ["1", "2", "3"];
But it sounds like you don't want an array, you really do want an object, like in your first example. If you convert that to JSON and send it to your server, use json_decode to decode it into a PHP object where you can access the key1, key2, and key3 properties to get their values.

You are confusing arrays in js with arrays in php. If in php you can define literal keys for an array like this:
<?php
$a = array( 'key1' => 1);
$a['key1] === 1
in js that is the equivalent of an object rather than an array.
Js is more mathematichal , if you like, with the concept of array,
a = [2, 4, 6];
it is just a list of values/ objects each given by a numeric index.
a[1] === 4

In JavaScript you can attach properties to an array, which will not be member of this array. For example:
let array = new Array(); // Creates empty array: []
array[0] = 123; // Inserts a member to array
console.log(array) // Will output: [123]
array["abc"] = 789 // Attaches a property to array
console.log(array) // Will output: [123], no members were added to array
console.log(array.abc) // Will output: 789
This is possible because Array also acts as an object, so it has members (indexed) and also properties (having keys).
Arrays do not have keys (key0,key2,key3,...), only indexes (0,1,2,...). You probably want either a map or an array. The map is created by code you have attached to the question (first section), the array can be created as following:
var feld = new Array ();
feld[0]="1";
feld[1]="2";
feld[2]="3";
var jsonString = JSON.stringify(feld);
console.log(jsonString);

You have to objectify your array:
...
feld = Object.assign({}, feld);
var jsonString = JSON.stringify(feld);
...

Related

Why does JSON.stringify() not work on this array?

I have an array which is declared like this:
array = [];
and has values as shown below -
....
ChIJOaegwbTHwoARg7zN_9nq5Uc:"ChIJOaegwbTHwoARg7zN_9nq5Uc"
ChIJXTwCdefHwoAR9Jr4-le12q4:"ChIJXTwCdefHwoAR9Jr4-le12q4"
....
These values are printed when I do console.log(array);
When I try to do a JSON.stringify(array), it does not seem to work. I want to store this array in localStorage using localStorage.setItem().
I tried an example like in this in the browser console:
var arr=[]
arr[0] = 1
arr[1] = 2
JSON.stringify(arr);
And the above example worked perfectly fine.
Please provide your inputs, I have been stuck at this for hours.
You are trying to assign values in array like objects ; index can only be o,1,2 etc. not the strings like you have used. If you must do this, create an array of objects
the problem is that you are trying to set the array index as strings 'ChIJOaegwbTHwoARg7zN_9nq5Uc' and 'ChIJXTwCdefHwoAR9Jr4-le12q4' and although the browser seems to print it in the console, but array considers only integer keys as valid indices, so if you try to print array.length, it will print 0 and hence operations such as JSON.stringify(array) don't return you anything
var array = [];
array['ChIJOaegwbTHwoARg7zN_9nq5Uc'] = "ChIJOaegwbTHwoARg7zN_9nq5Uc";
array['ChIJXTwCdefHwoAR9Jr4-le12q4'] = "ChIJXTwCdefHwoAR9Jr4-le12q4";
console.log(array);
console.log(array.length)
What you need is not an array but an object
var obj = {};
obj['ChIJOaegwbTHwoARg7zN_9nq5Uc'] = "ChIJOaegwbTHwoARg7zN_9nq5Uc";
obj['ChIJXTwCdefHwoAR9Jr4-le12q4'] = "ChIJXTwCdefHwoAR9Jr4-le12q4";
console.log(obj);
console.log(JSON.stringify(obj))
That's not an array, but an object. Objects don't stringify as well as arrays do.
Basically:
String = 'This is a string'
Array = [
'This is a string',
'And so is this'
]
Object = {
firstString : 'This is a string',
secondString : 'And so is this.'
}
This works for me in a plunker.
let array = [];
array.push({"ChIJOaegwbTHwoARg7zN_9nq5Uc":"ChIJOaegwbTHwoARg7zN_9nq5Uc"});
array.push({"ChIJXTwCdefHwoAR9Jr4-le12q4":"ChIJXTwCdefHwoAR9Jr4-le12q4"});
console.log(JSON.stringify(array));
If you do a console.log(array), you should see something like this:

How to check if array contains objects

I have array, created from json:
var array = [{"name":"name1","group":"group1","id":"123", ...},
{"name":"name2","group":"group2","id":"456", ...},
{"name":"name3","group":"group1","id":"789", ...}];
After I get another array:
var array1 = [{"name":"name1","group":"group1","id":"123", ...},
{"name":"name4","group":"group1","id":"987", ...}]
I need to push items from second array into first, but how can I check if first array contains objects from second array?
Each object in array contain more property and some of them are created dynamically so I can't check for example by indexOf(). All solutions that I found works only with simple objects like Int. It will be great if I could check by property "id" for example.
Use find first
var newObj = {"name":"name2","group":"group2","id":"456"};
var value = array.find( s => s.id == newObj.id );
Now push if the value is not found
if ( !value )
{
array.push( newObj )
}
(More generic)you can do this one line using following (which will add all object which is not in array).
array.concat(array1.filter(x=>!array.find(s=>s.id==x.id)));
var array = [{"name":"name1","group":"group1","id":"123"},
{"name":"name2","group":"group2","id":"456" },
{"name":"name3","group":"group1","id":"789"}];
var array1 = [{"name":"name1","group":"group1","id":"123"},
{"name":"name4","group":"group1","id":"987"}];
array=array.concat(array1.filter(x=>!array.find(s=>s.id==x.id)));
console.log(array);

js array to json but some value disappear

window.onload = function() {
var arr = new Array;
var jsonObj = {
"123": "234"
};
arr['v'] = "234";
arr[0] = jsonObj;
arr[1] = jsonObj;
console.log(JSON.stringify(arr));
}
The above code result is :
[{"123":"234"},{"123":"234"}]
I don't know why the arr['v'] disappeared?
Object and Array are not parsed to JSON the same way.
an Array will only include the numeric keys, and an Object will include all of its keys:
var Arr = [], Obj ={};
Arr[0] = Obj[0] = 'a';
Arr[1] = Obj[2] = 'b';
Arr['key'] = Obj['key'] = 'c';
console.log(JSON.stringify(Arr));
console.log(JSON.stringify(Obj));
so in your case, you could simply use an Onject instead of an array:
var arr = new Object;
var jsonObj = {"123":"234"};
arr['v'] = "234";
arr[0] = jsonObj;
arr[1] = jsonObj;
console.log(JSON.stringify(arr));
Actually, JSON.stringify will ignore non-numeric keys in Array during the Array JSON serialization. From the latest ECMA Spec, in section "24.3.2.4 Runtime Semantics: SerializeJSONArray ( value )", we know JSON.stringify only utilizes length of Array and related numeric keys to do the serialization, and Array length will not be affected by its non-numeric keys. So it is now clear why 'v' (non-numeric keys) disappear in your final result.
You can't use a string as an array index, unless it is a string representation of an integer.
Therefore, arr['v'] has no meaning.
This stackoverflow question goes into more detail, but the relevant part:
Yes, technically array-indexes are strings, but as Flanagan elegantly
put it in his 'Definitive guide':
"It is helpful to clearly distinguish an array index from an object
property name. All indexes are property names, but only property names
that are integers between 0 and 232-1 are indexes."
In JavaScript, basically two types of array, Standard array and associative array. Standard array is defined by [], so 0 based type indexes. And in associative array is defined by {}, in this case you can define string as keys. So in your code you are using both is single array, that's not acceptable. So define the another array if you want strings keys.

Serializing a Javascript object with contained arrays to json?

I have a javascript object that contains a few objects that contain associative arrays. I've been trying to use the json2.js library's stringify function but the output doesn't contain the arrays held in the contained object members.
In my code I start with something like this
obj = {"arr1" : [], "arr2" : [], "arr3" : []};
then I add to it with loops that fill each of the contained arrays
obj[arr*].push[arritem*];
obj[arr*][arritem*] = something;
The arr* and arritem* I put in just to represent the variable I am putting in for the loops.
I try Json.stringify(obj) but the string I get back is
'{"arr1" : [0], "arr2" : [0], "arr3" : [0]}'
I would like to see the ouput as
'{"arr1" : [ "arritem1" : something, "arritem2" : something2], "arr2" : [ "arritem1" : something, "arritem2" : something2], "arr3" : [ "arritem1" : something, "arritem2" : something2]}'
is there a better library for this or is there something I have to do before strinfying?
var obj = {"arr1" : [], "arr2" : [], "arr3" : []};
console.log(JSON.stringify(obj));
Works for me.
Filling the arrays works too.
Update
You imply that you are trying to add elements with non-numeric keys to arrays.
This is not valid. In particular, your desired output is not valid JSON. Arrays have only numeric keys, and they are not included in the JSON itself as they are implicitly, sequentially defined.
Arrays are a special type of Object, which handles numeric indexes for you.
var arr = []; // Create array.
arr.push(1); // There is now one element, with index 0 and value 1.
arr["txt"] = 2; // You tried to create a new element,
// but didn't use .push and gave a non-numeric key.
// This broke your array.
console.log(JSON.stringify(arr));
// Output: [1]
Live demo.
Long story short... don't do this. If you want an "associative array", stick with basic objects:
var obj = {}; // Create object.
obj[0] = 1; // There is now one element, with key "0" and value 1.
obj["txt"] = 2; // There is now a second element, with key "txt" and value 2.
console.log(JSON.stringify(arr));
// Output: {"0":1,"txt":2}
Live demo.
obj.toSource()
this will convert your array to source string.

Using an integer as a key in an associative array in JavaScript

When I create a new JavaScript array, and use an integer as a key, each element of that array up to the integer is created as undefined.
For example:
var test = new Array();
test[2300] = 'Some string';
console.log(test);
will output 2298 undefined's and one 'Some string'.
How should I get JavaScript to use 2300 as a string instead of an integer, or how should I keep it from instantiating 2299 empty indices?
Use an object, as people are saying. However, note that you can not have integer keys. JavaScript will convert the integer to a string. The following outputs 20, not undefined:
var test = {}
test[2300] = 20;
console.log(test["2300"]);
You can just use an object:
var test = {}
test[2300] = 'Some string';
As people say, JavaScript will convert a string of number to integer, so it is not possible to use directly on an associative array, but objects will work for you in similar way I think.
You can create your object:
var object = {};
And add the values as array works:
object[1] = value;
object[2] = value;
This will give you:
{
'1': value,
'2': value
}
After that you can access it like an array in other languages getting the key:
for(key in object)
{
value = object[key] ;
}
I have tested and works.
If the use case is storing data in a collection then ECMAScript 6 provides the Map type.
It's only heavier to initialize.
Here is an example:
const map = new Map();
map.set(1, "One");
map.set(2, "Two");
map.set(3, "Three");
console.log("=== With Map ===");
for (const [key, value] of map) {
console.log(`${key}: ${value} (${typeof(key)})`);
}
console.log("=== With Object ===");
const fakeMap = {
1: "One",
2: "Two",
3: "Three"
};
for (const key in fakeMap) {
console.log(`${key}: ${fakeMap[key]} (${typeof(key)})`);
}
Result:
=== With Map ===
1: One (number)
2: Two (number)
3: Three (number)
=== With Object ===
1: One (string)
2: Two (string)
3: Three (string)
Compiling other answers:
Object
var test = {};
When using a number as a new property's key, the number turns into a string:
test[2300] = 'Some string';
console.log(test['2300']);
// Output: 'Some string'
When accessing the property's value using the same number, the number is turned into a string again:
console.log(test[2300]);
// Output: 'Some string'
When getting the keys from the object, though, they aren't going to be turned back into numbers:
for (var key in test) {
console.log(typeof key);
}
// Output: 'string'
Map
ECMAScript 6 allows the use of the Map object (documentation, a comparison with Object). If your code is meant to be interpreted locally or the ECMAScript 6 compatibility table looks green enough for your purposes, consider using a Map:
var test = new Map();
test.set(2300, 'Some string');
console.log(test.get(2300));
// Output: 'Some string'
No type conversion is performed, for better and for worse:
console.log(test.get('2300'));
// Output: undefined
test.set('2300', 'Very different string');
console.log(test.get(2300));
// Output: 'Some string'
Use an object instead of an array. Arrays in JavaScript are not associative arrays. They are objects with magic associated with any properties whose names look like integers. That magic is not what you want if you're not using them as a traditional array-like structure.
var test = {};
test[2300] = 'some string';
console.log(test);
Try using an Object, not an Array:
var test = new Object(); test[2300] = 'Some string';
Get the value for an associative array property when the property name is an integer:
Starting with an associative array where the property names are integers:
var categories = [
{"1": "Category 1"},
{"2": "Category 2"},
{"3": "Category 3"},
{"4": "Category 4"}
];
Push items to the array:
categories.push({"2300": "Category 2300"});
categories.push({"2301": "Category 2301"});
Loop through the array and do something with the property value.
for (var i = 0; i < categories.length; i++) {
for (var categoryid in categories[i]) {
var category = categories[i][categoryid];
// Log progress to the console
console.log(categoryid + ": " + category);
// ... do something
}
}
Console output should look like this:
1: Category 1
2: Category 2
3: Category 3
4: Category 4
2300: Category 2300
2301: Category 2301
As you can see, you can get around the associative array limitation and have a property name be an integer.
NOTE: The associative array in my example is the JSON content you would have if you serialized a Dictionary<string, string>[] object.
Simple solution if you would rather use an array.
When adding the number just preface it with a letter.
e.g.
let ctr = 3800;
let myArray=[];
myArray["x" + ctr.toString()]="something";
myArray["x" + (ctr+1).toString()]="another thing";
Then just add the "x" in access routines that call the number as an index.
e.g.:
console.log( myArray["x3800"] );
or:
console.log( myArray["x"+ numberOfYourChoice.toString()] );
Use an object - with an integer as the key - rather than an array.
Sometimes I use a prefixes for my keys. For example:
var pre = 'foo',
key = pre + 1234
obj = {};
obj[key] = val;
Now you don't have any problem accessing them.

Categories

Resources