Nie znając kluczy JavaScript Object
, jak mogę włączyć coś takiego ...
var obj = {
param1: 'something',
param2: 'somethingelse',
param3: 'another'
}
obj[param4] = 'yetanother';
...w...
var str = 'param1=something¶m2=somethingelse¶m3=another¶m4=yetanother';
...?
javascript
bobsoap
źródło
źródło
Odpowiedzi:
Przykład: http://jsfiddle.net/WFPen/
źródło
{ a:[ 1, 2 ], b:{ c:3, d:[ 4, 5 ], e:{ x:[ 6 ], y:7, z:[ 8, 9 ] }, f:true, g:false, h:undefined }, i:[ 10, 11 ], j:true, k:false, l:[ undefined, 0 ], m:"cowboy hat?" };
Wygląda na to, że @UnLoCo zasugerował bibliotekę NPM, która również będzie działać, która wyciąga działającą metodę param z jQuery, aby była samodzielna.Jeśli używasz jQuery, to używa on do parametryzacji opcji żądania AJAX GET:
http://api.jquery.com/jQuery.param/
źródło
Elegancki: (zakładając, że korzystasz z nowoczesnej przeglądarki lub węzła)
I odpowiednik ES2017: (dzięki Lukasowi)
Uwaga: prawdopodobnie zechcesz użyć,
encodeURIComponent()
jeśli klucze / wartości nie są zakodowane w postaci adresu URL.źródło
+ encodeURIComponent(obj[key])
Object.entries(obj).map(([key, val]) => `${key}=${val}`).join('&')
=${encodeURIComponent(val)}
Co powiesz na to? To jedna linia i brak zależności:
Użyj go z wbudowanym adresem URL w następujący sposób:
[Edit April 4, 2020]: jak wspomniano w komentarzach,
null
wartości będą interpretowane jako ciąg'null'
. Dlatego uważaj na wartości null.źródło
const { URLSearchParams } = require("url");
źródło
ES6:
źródło
Na jeden poziom głębokości ...
jsFiddle .
Mówiono o funkcji rekurencyjnej dla dowolnie głębokich obiektów ...
jsFiddle .
To oczywiście oznacza, że kontekst zagnieżdżenia jest tracony podczas serializacji.
Jeśli wartości nie są zakodowane w adresie URL od początku i zamierzasz użyć ich w adresie URL, sprawdź JavaScript
encodeURIComponent()
.źródło
.hasOwnProperty(prop)
.źródło
Tak dla przypomnienia, jeśli masz przeglądarkę obsługującą ES6, oto rozwiązanie z
reduce
:A oto fragment w akcji!
źródło
Ponieważ zrobiłem wiele rzeczy na temat funkcji rekurencyjnej, oto moja własna wersja.
http://jsfiddle.net/userdude/Kk3Lz/2/
źródło
[]
są preferowane zamiastnew Array()
(b) Możesz użyćdelimiter = delimiter || '&';
argumentu default (i źle go przeliterowałeś) (c) Iterowanie zfor ( in )
will iteruje po wszystkich wyliczalnych właściwościach, w tym w łańcuchu prototypów (obj.hasOwnProperty()
chroni przed tym) (d)typeof
może kłamać na temat tego, czym są rzeczy, np. niektóre liczby mogą być,Object
jeśli zostały skonstruowane za pomocąNumber()
konstruktora (e)Array
mająpush()
metodę dodawania elementów (f) w porównaniu dotrue
jest zbędna. Jestem nieznośnym draniem, ale chciałeś poznać opinię! :)hasOwnProperty()
; d) to z pewnością prawda i słuszna uwaga; e) Nigdy nie przyzwyczaiłem się do używaniapush()
lubpop()
metod; f)break
czy niebreak
, oto jest pytanie. Dziękuję za szczegółowe informacje. :)Przydatny kod, gdy masz tablicę w zapytaniu:
źródło
Jeśli używasz NodeJS 13.1 lub wyższego, możesz użyć natywnego modułu querystring do analizowania ciągów zapytań.
źródło
Daj temu szansę.
Przykład: http://jsfiddle.net/T2UWT/
źródło
Możesz użyć
param
metody jQuery :źródło
wydaje się wykonywać swoją pracę. Nie ma potrzeby
encodeURIComponent
. Wyjściahello=world&foo=bar
źródło
Jeśli potrzebujesz funkcji rekurencyjnej, która będzie generować odpowiednie parametry adresu URL na podstawie podanego obiektu, wypróbuj moją wersję Coffee-Script.
lub skompilowany JavaScript ...
To skonstruuje napisy w ten sposób:
źródło
Podejście funkcjonalne.
źródło
źródło
ta metoda używa rekurencji, aby zejść do hierarchii obiektów i wygenerować parametry w stylu rails, które railsy interpretują jako osadzone hashe. obiekt objToParams generuje ciąg zapytania z dodatkowym ampersandem na końcu, a objToQuery usuwa ostatni znak amperseand.
źródło
Możesz użyć ciągu zapytania npm lib
źródło
źródło