JavaScriptで連想配列と配列の混ざったリストを表示したい

Question

前提・実現したいこと

JavaScript初心者です。色々試したり調べているのですが数日間悩んでいます。お力を貸していただけたら嬉しいです。
APIから読み込み取得した情報の中で、連想配列と配列（という言い方でいいのでしょうか）の混ざった情報の表示ができなく困っています。
以下の情報はある情報の一部で、例えばingredientsの中のmaltの情報はここでは３つですが、他のものだと数が変わってきます。

malt name:　○○○○
amount value:　○○○○
amount unit:　○○○○
(×表示分、今回であれば２個)

hops name:　○○○○
amount value:　○○○○
amount unit:　○○○○
add:　○○○○
attribute:　○○○○

(×表示分、今回であれば１個)

と表示したいです。

該当のソースコード

let beer = {

    "ingredients": {
        "malt": [
            {
                "name": "Extra Pale",
                "amount": {
                    "value": 5.06,
                    "unit": "kilograms"
                }
            },
            {
                "name": "Caramalt",
                "amount": {
                    "value": 0.25,
                    "unit": "kilograms"
                }
            },
        ],
        "hops": [
            {
                "name": "Cascade",
                "amount": {
                    "value": 2.5,
                    "unit": "grams"
                },
                "add": "start",
                "attribute": "bitter"
            },
           
        ],
        "yeast": "Wyeast 1056 - American Ale™"
    }
}

試したこと

Object.keys(beer.ingredients).forEach(function (key) {

console.log( key +":" + beer.ingredients[key]);

});

for文、forEach文、for in等試しましたがjavascript学習１か月目で検討がつきません。
よろしくお願いいたします。

Comments

[yambejp]

例示するなら元データから導かれる結果をきっちり書いたほうが良いと思います

[Wilma]

大変失礼いたしました。元データとはAPIの事でしょうか。見当違いなお返事でしたら申し訳ございません。

[standard-soft]

この文字列を書いてほしいということですね。
2回出力とか書いてあっても日本語だと曖昧なので迷うんです。

// "malt name: Extra Pale"
// "amount value: 5.06"
// "amount unit: kilograms"
// "malt name: Caramalt"
// "amount value: 0.25"
// "amount unit: kilograms"
// "hops name: Cascade"
// "amount value: 2.5"
// "amount unit: grams"
// "add start"
// "attribute bitter"

あと、元コードのところもちゃんとコードタグで囲ったり、してほしいです。
また機会あればお気をつけください。

[Wilma]

不慣れなもので分かりにくい記述になってしまいまして申し訳ございません。また、ご指摘ありがとうございます。次回から気を付けますね。また機会があればよろしくお願いします。

[standard-soft]

いえいえ、お気になさらずに、どしどし質問して慣れていってください。

[Wilma]

ありがとうございました。

Answer 1

配列をどう評価して、結果をどう表示したいかによりますね

const array_values=(v,key,parent1,parent2)=>{
  var ret=[];
  if(/Number|String|Null/.test(Object.prototype.toString.call(v))){
    if(typeof parent2!=="undefined") ret.push([v,key,parent1,parent2]);
  }else{
    Object.entries(v).forEach((x,y)=>{ret=ret.concat(array_values(x[1],x[0],key,parent1))});
  }
  return ret;
}
const data=array_values(beer.ingredients).map(x=>x.filter(x=>!/^\d+$/.test(x)).reverse());
console.log(data);

Comments

[Wilma]

わかりにくい説明の中、お早いお返事とご回答、ありがとうございます。
教えていただいた方法で表記ができました。
色々な表記方法、これから勉強するにあたり参考にさせていただきます。ありがとうございました！

Answer 2

少し変えます。こんな感じでしょうか。
出力内容を正確に記載してもらえると回答しやすいです。

https://jsbin.com/yesogoqiqe/edit?html,js,console

const beer = {
  'ingredients': {
    'malt': [
      {
        'name': 'Extra Pale',
        'amount': {
          'value': 5.06,
          'unit': 'kilograms',
        },
      },
      {
        'name': 'Caramalt',
        'amount': {
          'value': 0.25,
          'unit': 'kilograms',
        },
      },
    ],
    'hops': [
      {
        'name': 'Cascade',
        'amount': {
          'value': 2.5,
          'unit': 'grams',
        },
        'add': 'start',
        'attribute': 'bitter',
      },

    ],
    'yeast': 'Wyeast 1056 - American Ale™',
  },
};

for (const [key, value] of Object.entries(beer.ingredients)) {
  if (Array.isArray(value)) {
    for (const element of value) {
      console.log(`${key} name: ${element.name}`);
      console.log(`amount value: ${element.amount.value}`);
      console.log(`amount unit: ${element.amount.unit}`);
      if ('add' in element) {
        console.log(`add ${element.add}`);
        console.log(`attribute ${element.attribute}`);
      }
    }
  }
}

// "malt name: Extra Pale"
// "amount value: 5.06"
// "amount unit: kilograms"
// "malt name: Caramalt"
// "amount value: 0.25"
// "amount unit: kilograms"
// "hops name: Cascade"
// "amount value: 2.5"
// "amount unit: grams"
// "add start"
// "attribute bitter"

Comments

[Wilma]

説明が分かりにくくて申し訳ございません。
教えていただいた方法で無事に希望の表記が事ができました。
とても参考になりました。ありがとうございます！

[standard-soft]

nameを複数個だしていいのかどうか少し迷いました。

コードの動きを確認したりして
いろいろ工夫してみてください。

Answer 3

const beer = {
  'ingredients': {
    'malt': [
      {
        'name': 'Extra Pale',
        'amount': {
          'value': 5.06,
          'unit': 'kilograms',
        },
      },
      {
        'name': 'Caramalt',
        'amount': {
          'value': 0.25,
          'unit': 'kilograms',
        },
      },
    ],
    'hops': [
      {
        'name': 'Cascade',
        'amount': {
          'value': 2.5,
          'unit': 'grams',
        },
        'add': 'start',
        'attribute': 'bitter',
      },

    ],
    'yeast': 'Wyeast 1056 - American Ale™',
  },
};

for (const [key, value] of Object.entries(beer.ingredients)) {
  if (Array.isArray(value)) {
    console.log(`name: ${key}`);
    for (const element of value) {
      console.log(`amount value: ${element.amount.value}`);
      console.log(`amount unit: ${element.amount.unit}`);
      if ('add' in element) {
        console.log(`add ${element.add}`);
        console.log(`attribute ${element.attribute}`);
      }
    }
  }
}

// name: malt
// amount value: 5.06
// amount unit: kilograms
// amount value: 0.25
// amount unit: kilograms
// name: hops
// amount value: 2.5
// amount unit: grams
// add start
// attribute bitter

Comments

[Wilma]

ご返答ありがとうございます。とても参考になります！
name: malt　ではなく、malt name: ○○という表示にしたい場合にはどうすればいいでしょうか。maltの直後が配列になっているため、nameの表示がうまくいきません・・。

[standard-soft]

もう一つコード配置して回答してみました。よろしくです。