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

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

ただいまの
回答率

90.32%

【json】配列・オブジェクト追加方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,443

tonari

score 40

こんにちわ。
いきなりですがこちらのコードを修正することになった際に困ったことがあります。

元のファイル(修正前)
<script type="text/javascript">
var markerArray = new Array();
var id = '11';
var no = 1; 
var href = 'javascript:openYadoSyosai(\'' + id + '\')';
var content = '<a href="' + href + '">';
var markerData = new Data(1111, id, content, "TE" + no);
testData.push(markerData);

var id = '22';
var no = 2; 
var href = 'javascript:openYadoSyosai(\'' + id + '\')';
var content = '<a href="' + href + '">';
var markerData = new Data(2222, id, content, "TE" + no);
testData.push(markerData);
.....
</script>


このデータをjsonにしてそのデータを取得してfor文で回す修正なのですが、
下記の様にしてみたのですが、markerDataのところでどうして良いかわからなくなっています。
詳しい方教えていただけると助かります。
よろしくお願いいたします。

<script id="data" type="application/json">
  [
    {
      "id": "11",
      "no": "1",
      "markerData": "new Data(1111, id, content, 'TE' + no)"//idに11、noに1を入れたい。
    },
    {
      "id": "22",
      "no": "2",
      "markerData": "new Data(2222, id, content, 'TE' + no)"//idに22、noに2を入れたい。
    },
.....
</script>
<script type="text/javascript">
var testData = JSON.parse(document.getElementById('data').innerText);//データを持ってきている
var zMax = testData.length;
for (var i = 0; i < zMax; i++ ) {
if (testData[i] != null)
testData[i].href = 'javascript:openYadoSyosai(\'' + testData[i].id + '\')';
testData[i].content = '<a href="' + testData[i].href + '">';//このtestData[i].contentを”markerData”のcontentに入れたい
}
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

コピペ部分の何が繰り返されているかに着目すれば, さほど難しくありません.
以下考え方について示します.

以下のコードに注目して下さい.

var id = '11';//(1-1)
var no = 1; //(1-2)
var href = 'javascript:openYadoSyosai(\'' + id + '\')';//(1-3)
var content = '<a href="' + href + '">';//(1-4)
var markerData = new Data(1111, id, content, "TE" + no);//(1-5)
testData.push(markerData);//(1-6)

var id = '22';//(2-1)
var no = 2; //(2-2)
var href = 'javascript:openYadoSyosai(\'' + id + '\')';//(2-3)
var content = '<a href="' + href + '">';//(2-4)
var markerData = new Data(2222, id, content, "TE" + no);//(2-5)
testData.push(markerData);//(2-6)

この内, (1-x)と(2−x)との間で異なる部分はどこでしょうか?
(1-1)(1-2)では変数に代入している値が, (1-5)ではコードの一部が異なっています. つまり, その部分以外はそのままループ処理とできそうです.

そこで, 元のコードを次のように変形します.

//繰り返し処理に入力されるデータを取り出し, リスト化してみた
{id: "11", no:1, a: 1111}
{id: "22", no:2, a: 2222}

//繰り返し処理をとりあえずforで囲ってみた
for(何らかの条件){
    var id = ???;
    var no = ???; 
    var href = 'javascript:openYadoSyosai(\'' + id + '\')';
    var content = '<a href="' + href + '">';
    var a = ???;
    var markerData = new Data(a, id, content, "TE" + no);
    testData.push(markerData);
}

但しこのままではJavaScriptとしては正しくないので, リストを配列化し変数名等を追加します.

var testData = [
    {id: "11", no:1, a: 1111},
    {id: "22", no:2, a: 2222}
];
testData.forEach(data => {
    var id = data.id;
    var no = data.no; 
    var href = 'javascript:openYadoSyosai(\'' + id + '\')';
    var content = '<a href="' + href + '">';
    var a = data.a;
    var markerData = new Data(a, id, content, "TE" + no);
    testData.push(markerData);
});

ここでtestDataの内容はJSONで取得するとのことでしたから, 

<script id="data" type="application/json">
[
    {"id": "11", "no": 1, "a": 1111},
    {"id": "22", "no": 2, "a": 2222}
]
</script>
var testData = JSON.parse(document.getElementById('data').textContent);
testData.forEach(data => {
    var id = data.id;
    var no = data.no; 
    var href = 'javascript:openYadoSyosai(\'' + id + '\')';
    var content = '<a href="' + href + '">';
    var a = data.a;
    var markerData = new Data(a, id, content, "TE" + no);
    testData.push(markerData);
});

となります.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/29 15:02

    ご回答あいがとうございます。
    無事このやり方でできました!
    ありがとうございます

    キャンセル

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

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る