質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

6451閲覧

JSONデータのソートについて

m.Tohato

総合スコア16

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/01/30 07:23

編集2019/01/31 00:00

JSONデータのソートについて

下記のJSONデータを名前ごとに取り出して時間でソートするようなプログラムを作成しております。データは一部のみ記載しております。
下記エラーの対処方法を教えて頂けないでしょうか。

JSON

1[{ 2 "time": "2018-07-20T03:31:57.000Z", 3 "temp": 15.29, 4 "devName": "test1" 5}, { 6 "time": "2018-07-20T03:31:57.000Z", 7 "temp": 12.15, 8 "devName": "test2" 9}, { 10 "time": "2018-07-20T03:31:57.000Z", 11 "temp": 38.15, 12 "devName": "test3" 13}, { 14 "time": "2018-07-20T03:31:57.000Z", 15 "temp": 27.15, 16 "devName": "test4" 17}, { 18 "time": "2018-07-20T03:32:57.000Z", 19 "temp": 16.15, 20 "devName": "test1" 21}, { 22 "time": "2018-07-20T03:32:57.000Z", 23 "temp": 25.15, 24 "devName": "test2" 25}, { 26 "time": "2018-07-20T03:32:57.000Z", 27 "temp": 24.15, 28 "devName": "test3" 29}, { 30 "time": "2018-07-20T03:32:57.000Z", 31 "temp": 23.15, 32 "devName": "test4" 33}, { 34 "time": "2018-07-20T03:33:57.000Z", 35 "temp": 22.15, 36 "devName": "test1" 37}, { 38 "time": "2018-07-20T03:33:57.000Z", 39 "temp": 30.32, 40 "devName": "test2" 41}, { 42 "time": "2018-07-20T03:33:57.000Z", 43 "temp": 39.15, 44 "devName": "test3" 45}, { 46 "time": "2018-07-20T03:33:57.000Z", 47 "temp": 32.15, 48 "devName": "test4" 49}]

発生している問題・エラーメッセージ

Uncaught TypeError: data.sort is not a function

該当のソースコード

javascript

1 window.onload = function () { 2 var getData = []; 3 var data1 = []; 4 $.getJSON("URL", getData) 5 .done(function (getData) { 6 // console.log(getData); 7 var data1 = JSON.stringify(getData); 8 makeChart(data1); 9 }) 10 };

上記でデータを取得

javascript

1function makeData(data) { 2 var chartData = []; 3 data.sort(function (a, b) { 4 return (new Date(a.time).getTime() > new Date(b.time).getTime() ? 1 : -1); 5 }); 6 for (var i = 0, len = data.length; i < len; i++) { 7 var filterdata = data.filter(function (x) { 8 return x.devName === "test"; 9 }); 10 } 11 for (var i = 0, len2 = filterdata.length; i < len2; i++) { 12 var visits = filterdata[i].temp; 13 var newdate = new Date(filterdata[i].time); 14 chartData.push({ 15 "date": newdate, 16 "value": visits 17 }); 18 } 19 return chartData; 20 };

上記の関数を

javascript

1var test = makeData(data1);

以上のように呼び出そうと考えております。

makeChart()からmakeData()へはどう渡されるのでしょうか?
新たに

javascript

1function makeChart(data1) { 234series1.data = makeData(data1); 567}

上記で渡そうと考えております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/30 07:25

makeDataはどこからどのように呼ばれるのでしょうか。 全体の流れがわかる、「他人が再現確認可能なコードとデータ」を提示してください。
m.Tohato

2019/01/30 07:36 編集

コメントありがとうございます。 window.onload = function () { var getData = []; var data1 = []; $.getJSON("URL", getData) .done(function (getData) { // console.log(getData); var data = JSON.stringify(getData); makeChart(data1); }) }; 上記からgetJSONで取ってきたデータを var test = makeData(data1); といったように呼び出そうと考えています。
m.ts10806

2019/01/30 07:33

質問は編集できるので適宜ご対応ください
dice142

2019/01/30 07:45

window.onload内のdata1はdata2の打ち間違いですか?
m.Tohato

2019/01/30 07:47

大変失礼致しました。タイプミスでした。修正致しました。
x_x

2019/01/30 08:43

makeChart()からmakeData()へはどう渡されるのでしょうか?
m.Tohato

2019/01/31 00:01

コードを追加致しました。
x_x

2019/01/31 00:29

ありがとうございました。 個人的にはどうしてここがわからないのに回答できてしまうのか不思議ですが、すでについている回答で解決しそうです。
guest

回答4

0

ベストアンサー

呼び出し元で

JavaScript

1var data1 = JSON.stringify(getData);

とわざわざ取得してきたJSONを文字列化しています。
それをmakeData()に渡しているので、以下の場所で

JavaScript

1data.sort(function (a, b) {

「文字列にsortという関数はない」というエラーになります。

JSONを文字列化する必要があるのであれば、ソート前にparseする必要がありますし、
そもそも文字列化する意味がないのであればそのままデータを渡してあげれば良いと思います。

投稿2019/01/30 07:52

dice142

総合スコア5158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2019/01/30 09:05

この回答にちょっとだけ補足です。 Ajaxの`$.getJSON("URL", getData)`はWebサーバに対して 「JSONファイル下さい、どうせ帰ってくるのJSON文字列でしょ?非同期関数の実行までにJSONを解析してJSのデータ取り出しておくから」と言っています。 なのでdoneで繋いだ関数一発目ではJSON文字列ではなく、 既に配列になったJSの値として扱える状態になっているはずです。 https://api.jquery.com/jquery.getjson/ なので「なんで折角JSの値になったのにまたJSON文字列にしちゃうんだ」というのが出発点になります。
guest

0

javascript

1 2const makeData = (data) => { 3 let map = new Map; 4 5 data.forEach (({ devName: n, time, temp }) => { 6 let p = {date: new Date (time), value: temp }; 7 map.has (n) ? map.get (n).push (p): map.set (n, [p]) 8 }); 9 10 let r = [...map.entries ()].reduce ((a, [b, c]) => { 11 a[b] = c.sort ((a, b) => +a.time > +b.time); 12 return a; 13 }, { }); 14 15 return r; 16} 17 18console.log (makeData (data)); 19

投稿2019/01/30 10:10

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

function makeData(data) { var chartData = []; data.sort(function (a, b) { return (new Date(a.lt).getTime() > new Date(b.lt).getTime() ? 1 : -1); });

プログラムの3行目、data.sortのところでエラーが発生しています。

エラーメッセージは、

Uncaught TypeError: data.sort is not a function

というもので、makeDataの引数である data に対して、

data.sort(function (a, b)

という呼び出しをしたところ、"data.sortは関数じゃないです"と指摘された訳です。

この問題は、makeDataの引数が不適切な型だった事で起きているのですから、適切な型の引数を使えば解決するはずです。

質問に書かれたプログラムを作られたのが、m.hiroyukiさん自身なら修正方法をご存知だと思います。
どこかのサイトから引用してきたものであるなら、そのサイトに使い方の説明があるだろうと思います。

投稿2019/01/30 08:02

coco_bauer

総合スコア6915

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんにちは

ご質問のコードの何が原因で "Uncaught TypeError: data.sort is not a function" のエラーになっているのかについては、他の回答者様がすでに回答されておりますので、そちらを参考にして頂くとして、この回答ではご質問に挙げられている 関数 makeData をより少ないコードで書いたリファクタ案と、その動作確認用のサンプルを挙げます。

  • リファクタ案:

javascript

1const makeData = (data, devName) => 2 data.filter(e => e.devName === devName) 3 .map(e => ({ date: new Date(e.time), value: e.temp })) 4 .sort((e1,e2) => e1.date - e2.date);

上記のmakeDataでは、引数としてフィルターするための devName を追加しました。これを追加した理由は、ご質問にあるコードでは filter の条件として x.devName === "test" となっていますが、これだとご質問にあるJSONでは1件も該当しなくなってしまうためです。

以下は上記の makeData(data, devName)を使ったサンプルです。

このサンプルでは、

  1. 日時でソートされることを確認するために、ご質問に挙げられているJSONの配列要素をランダムに順序を入れ替えて、mockable.ioに上げたもの$.getJSON で取得します。
  2. 関数makeData が返す配列要素の内容を、<ul> によるリストの <li> として表示します。
  3. 表示結果から、 devName が "test1" である要素の内容が、 date の昇順に一覧されていることを確認できると思います。
  4. TARGET を他のdevNameの値("test2"など)に修正して再度実行すると、それに応じた表示になります。

  

以上、参考になれば幸いです。

投稿2019/01/30 09:51

編集2019/02/01 14:29
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問